There’s exciting things on the horizon for CSS layout
Michelle Barker has the scoop on all the upcoming things to get excited about, such as:
- Support is coming soon for the
gapCSS property when used with Flexbox in Chrome (yay!). - Masonry-style layouts will soon be possible Firefox.
- Chrome previewing a new Grid inspector, which looks like this:
Early web aesthetics ??
I love this site called Vistaserv.net that mimics the style of 90s websites, with non-aliased fonts and tiny gifs all over the place. They even wrote up how they made a modern browser look and feel like an old one. Just like this:
Throughout the post, they talk about the specific typographic style of the old web, but it’s still a fun read even if you aren’t a big font nerd like me.
Speaking of fonts…
The TypeMedia class of 2019 made an excellent website that showcases the work of the twelve students who spent that year learning about type design. Really though, the website is just astonishingly lovely and has a bunch of details that us web designers should take a close look at (like the really cool navigation that doesn’t feel obnoxious):
Even if fonts and type design isn’t your jam, I think there’s so much we can learn from type designers — the way they do graphic design, their use of color and shape, and the charming, easy-going copywriting style that’s found every where from their type specimens to the design notes about their work.
Have you heard of the CSS contain property?
MDN has this to say about the contain property: “This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page, leading to obvious performance benefits.” That sounds…pretty neat! And thankfully, Travis Almand has written a guide to walk us through it.
The general idea is that we can tell browsers how to more efficiently render things. As Travis mentions, though, it’s difficult to see the performance benefits. Even so, he does a pretty darn good job of doing it!
Chris has been making a whole bunch of nifty videos lately
I love these. So far Chris has made videos about how to make a grid of squares with CSS Grid, explored how HTML lists work, and tinkered around with video on mobile devices, just to name a few.
Want to keep up to date? You can find them all in the Video Screencasts section or over on YouTube.
Sponsor
MongoDB
MongoDB’s annual user conference is now virtual — and free. Register to get access to hands-on tutorials, 1:1 consulting sessions, an interactive “community cafe,” and more.
We just published our complete guide to CSS Functions!
Here it is! This post goes into a lot of depth about how they’re used and what you can do with them:
Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration. Some CSS functions even let you nest other functions within them!
The funny thing is that I didn’t really think about something like background-image: url('image.png'); as a function, but it totally is. You pass it an argument and it does a thing based on that data. I think the most common CSS function I use is calc — it’s just so dang handy that I can’t think of making a website without it. Good thing we have a complete guide to that, too.
Styling in the Shadow DOM with CSS Shadow Parts
Ollie Williams looks at Shadow Parts with the ::part() selector now being available in most popular browsers. It effectively allows us to make certain parts of a component to be styled with CSS. So, we sort of get all the benefits of using the Shadow DOM and allow those components to be extended and customized with styles from the outside. Here’s one advantage that Ollie describes:
Shadow DOM allows us to feel fully confident that a component will render as expected, regardless of what codebase it ends up in. Equally, none of the code meant only for a component can inadvertently affect anything else — all without resorting to onerous class naming conventions. Shadow DOM offers a level of encapsulation that can’t be achieved any other way.
Sponsor
Free Book: Modern Development on the JAMstack
Netlify already sets the standard for developing on the JAMstack but now they’ve literally written the book on it. Pick up a free digital copy of Modern Development on the JAMstack and you’ll most certainly level up your ability to craft super-fast websites with tips and tricks from no other than Mathias Biilmann and Phil Hawksworth.
[Chris]: I think the most linked-to, quoted-from, celebrated article in all of web design and development is John Allsopp’s A Dao of Web Design. It established the attitude, correctly so, that the web is just a different thing that anything before it, with all its unknowns and flexible nature.
Well, that article is 20 years old now, and John marked the occasion in the best possible way: a blog post.
In the years since it was published it’s continued to be referenced and to resonate, at least with some, something for which I am also immensely grateful, not least at the start of Ethan Marcotte’s ground breaking essay in the same publication, Responsive Web Design which coined the term we all know so well, and outlined the basic framework for the foundations of how so many design and build for the web today–Ethan’s piece itself will be 10 years old next month.
It feels like a rare moon-alignment moment that A Dao of Web Design turns 20 and Responsive Web Design turns 10 at so near the same time.
What is happening right now that we’ll look back on with such reverence in 10 more years? I’m not sure we’d be able to guess right now. Is it Jamstack? Is it progressive web apps? Is it component-driven development? Design systems?