I wasted a day on CSS selector performance to make a website load 2ms faster | Trys Mudford
Picture me holding Trys back and telling him, “Leave it alone, mate, it’s not worth it!”
Picture me holding Trys back and telling him, “Leave it alone, mate, it’s not worth it!”
This is a very handy piece of work by Rich:
The idea is to set sensible typographic defaults for use on prose (a column of text), making particular use of the font features provided by OpenType. The main principle is that it can be used as starting point for all projects, so doesn’t include design-specific aspects such as font choice, type scale or layout (including how you might like to set the line-length).
Speaking of zines, I really like Benjamin’s ideas about a web-first indie web zine: using print stylesheets with personal websites to make something tangible but webby.
This is good advice:
Write alternative text as if you’re describing the image to a friend.
Oh, this is a nice addition to the Utopia set of tools: when you don’t need a full-on type scale but you still want to figure out fluid clamp()
values, the clamp calculator has you covered.
It’s got permalinks too!
A solid update to Andy’s four-years old CSS reset. Best of all, every single line comes with an explanation. So if you don’t like the reasoning, don’t use that line.
Imagine a collaboratively developed, universal content style guide, based on usability evidence.
This is handy—a collection of font stacks using system fonts. You can see which ones are currently installed on your machine too.
The most performant web font is no web font.
I love print stylesheets but I was today years old when I found out that print-color-adjust
exists.
I agree with the reasoning here—a new display
value would be ideal.
Hear, hear!
If you have even a passing knowledge of CSS, I encourage you to experiment with its possibilities.
A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.
I think this might be the most excited I’ve been in quite some time about an update to browser support, which probably says a lot about my priorities:
Support for the
avoid
value of the CSS fragmentation propertiesbreak-before
,break-after
, andbreak-inside
when printing.
Finally!
I was talking about this with Léonie just yesterday. I, for one, would love to have CSS speech support. You know who else would love it? Content designers!
In these days of voice interaction on every platform, there is a growing expectation that it should be possible to design that experience just like we can the visual experience. In the same way an organisation chooses a logo and colour palette for its website, it stands to reason that they may also choose a particular voice that represents their brand.
It’s wild that there’s no way to do this on the web.
Dave rounds up some of the acronymtastic ways of scoping your CSS now that we’ve got a whole new toolkit at our disposal.
If your goal is to reduce specificity, new native CSS tools make reducing specificity a lot easier. You can author your CSS with near-zero specificity and even control the order in which your rules cascade.
A stylesheet for when you’re nostalgic for the old Mac OS.
Prompted by my recent post about using native button
elements, Trys puts forward a simple explanation for why someone would choose to use a div
instead.
The one common feature between every codebase I’ve encountered on that doesn’t use
button
s well, is a bad CSS reset. Developers try to use abutton
, and find that it still looks like a native browser button, so they grab a plain old, blank canvasdiv
, and build from there.
Occam’s Razor makes Trys’s explanation the most likely one.
I love this kind of spelunking into the history of why things are they way they are on the web!
Here, Detective Chief Inspector Suzanne tries to get to the bottom of why every browser has eight pixels of margin applied to the body
element in the user-agent stylesheet.
I love these notes on my recent talk!