The following is a guest post by Jeremy Wagner, a web developer, author, and speaker living in the Twin Cities. He's got a new book on web performance. Here we're going to dig into a brand new CSS feature, that once it percolates through the browser ecosystem, will be great for performance.
If you're a regular reader here at CSS-Tricks, chances are good that you're familiar with using web fonts. You may even know a few useful tricks to control how fonts load, but have you used the CSS font-display property?
The font-display property in CSS is newly available in Blink-based browser. It gives us the same power found in browser features such as the Font Loading API and third party scripts such as Bram Stein's Font Face Observer. The key difference, though, is that this capability is also now a CSS feature.
Tim Brown with a new (metaphorical) term to describe a value that can fluctuate between two set values:
In canal and river navigation, a lock is a device used for raising and lowering vessels between stretches of water that are at different levels. That’s exactly what our formula accomplishes. Our formula is a CSS calc “lock”.
To fluctuate between a 1.3em and 1.5em line-height depending on the screen width:
The following is a guest post by Declan Rek, who works as a developer at De Voorhoede, a front end tech agency. A version of this article was originally published on their blog. Declan asked about republishing here, and as it is jam-packed with real world case study performance stuff, I was into it.
At De Voorhoede we try to boost front-end performance as much as possible for our clients. It is not so easy to convince every client to follow all of our performance guidelines. We try to convince them by talking to them in their own language, and explain the importance of performance for conversion or compare their performance to their main competitors.
Incidentally, we recently updated our site. Apart from doing a complete design overhaul, this was the ideal opportunity to push performance to the max. Our goal was to take control, focus on performance, be flexible for the future and make it fun to write content for our site. Here’s how we mastered front-end performance for our site. Enjoy!
In CSS, attribute selectors have some fairly powerful matching abilities. You can match any attribute and any attribute with exact values, values that start with certain text, contain certain text, end with certain text, etc. This allows you to get pretty weird with a styling "language" if you want to.
The following is a guest post by David DeSandro. David wanted to offer a new feature in Isotope: staggered animations. Like so many things web, there are lots of ways he could have approached it. Here he looks at some of the possibilities, the advantages and disadvantages of each, and what he ultimately went with for Isotope.
The following is a guest post by Catalin Rosu, who along with some colleagues, dug up a ton of data about the HTML content of web sites. This is the most recent study of its kind and wildly fascinating to see the results. I find it especially fun to compare the top results to what I would have guessed would have won.
We've all been there. We try to improve our HTML code making it clean, beautiful, and readable. We do this in pursuit of better semantics and better accessibility, so that everyone can use it. It's our top priority. And we always have questions:
This year is An Event Apart's 10th anniversary. In order to celebrate, they are putting on competition called 10K Apart where people show off what can be accomplished in 10kB of data. This isn't a new competetion- its first genesis has been a project called 5k way back in 2000-2002. This year is sponsored by Microsoft Edge and they're giving away $10K in prizes to competitors. The judge panel has top professionals from web development, talented people like Sara Soueidan, Lara Hogan, Mat Marquis, Rachel Andrew and Heydon Pickering.
This competition is incredibly exciting as it focuses on things we as web developers can all benefit from thinking about. In terms of progressive enhancement, what is a usable baseline? How can we cleverly make our sites usable for a wide range of people? Aside from the clear benefit for performance, this contest focuses its attention on accessibility, designing for performance, and interesting innovations in the field.
Enter the contest! It should be great fun. My contribution was the SVG animation that you see on the homepage of the site (click the handle to watch it go again), created in less than 10kB with SVG and GreenSock, with particular help in SVG optimization from SVGOMG. Aaron Gustafson of Microsoft Edge has been hard at work on development for the site and everything you see there is under 10kB, as well, which is pretty rad.
I got an email from Brendan Foster the other day, a developer at the Australian agency The Competition. He was showing me an interesting CSS trick that helped him pull off a layout thing on a website he was helping work on for Margaret River Beverages. I actually thought the whole site was pretty interesting, and the idea occurred to me to jot down my thoughts as I explored the site. He was cool with it.
Someone wrote in asking how they might get the "original image" when all they had was the data URL version of the image. I'm not exactly sure how you get into that situation, but hey, I woke up in a trunk more than once.
You can absolutely get the original back, by exploiting the wonderful powers of the browser.
In this pairing screencast, I hang out with Dee Gill. We take a look at some layout stuff for a new app she's working on: Tinge. She had a design mockup she was working from, so we peak at that and try and build it out in HTML and CSS. We start at the top and focus on the navigation, using flexbox heavily to do what we need to do. …
