はてなブックマーク

Not long ago there was some buzz around how WebKit handles 100vh in CSS, essentially ignoring the bottom edge of the browser viewport. Some have suggested not using 100vh, others have come up with different alternatives to work around the problem. In fact, this issue goes further back a few years when Nicolas Hoizey filed a bug with WebKit on the subject (the short of it: WebKit says this is “inte

CSS resets help enforce style consistency across different browsers by providing a clean slate for styling elements. Resources like Normalize, et al., do an excellent job at managing this. For a couple of years now, I’ve opted to go with a minimalist approach to resets and found it to be just as useful: *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } Now elements will be

One element of responsive web design that can be tricky to solve for is typography. Ideally you want to have type that’s as fluid as possible across different viewports. A conventional way of doing this might be to start with a base font size and then change it when you hit a specific breakpoint: p { font-size: 1em; } @media screen and (max-width: 45em) { p { font-size: 1.25em; } } Here the font s

There’s been plenty of discussion in recent months regarding accessibility as it relates to the use of labels, which I think is great. Web designers and developers should treat accessibility as a fundamental part of development and not an afterthought. Still, I see plenty of implementations where labels are ignored for more eye-catching solutions, which in turn creates accessibility problems. Inte

One of my pet peeves in web design is how tables are often not optimized for non-desktop experiences. Let’s say I’m viewing Wikipedia on my iPhone, I’m looking through the episode list for Star Trek: The Next Generation (I grew up in the 90’s — deal), and the table has a lot of columns and data. There ends up being a lot of back-and-forth side swiping, device flipping, and general annoyance as I m