CSS Grids may reduce your need for media queries
CSS Grid is the most critical layout feature to come to browsers since Flexbox. It allows us to escape some of the magic numbers, hacks, and workarounds that we’ve grown accustomed to using for the last 15 years. It brings simplicity to declaring layouts that will tear a chunk out of most of the major CSS frameworks, and reduce bloat in our own hand crafted styles.
If you’re not familiar with what CSS Grid is, and you’ve made it this far, it’s a layout tool that applies to a containing element which then manages how the child elements are spaced, sized, and aligned.
CSS Grid gives us powerful new abilities — most notably for layout to be aware of both horizontal and vertical space at the same time, for changes to layout not to impact markup, and the ability adapt to available space without the need for media queries.
Read more from the source: Campaign Monitor Engineering
Firefox is taking a one-piece-at-a-time strategy to replace the Gecko rendering engine with a modern one coded in Rust.
Mozilla’s been working on a brand new, top-secret engine. Except it’s totally not top-secret. Never was. At another company it would have been a top-secret project. At Mozilla, it’s all done out in the open.
The project is called Servo. It was started as an experiment. It’s coded in a new programming language called Rust. (Gecko is written in C++.) And it’s open source. You can totally help us make it.
Read more from the source: jensimmons.com
Every country flag using only a single element, CSS, and fonts.
Flags of the world in just one div
View all at CSS Flags
Icons using a single element and CSS only
All 512 icons here.
As system fonts get nicer you might consider treating them like first-class citizens on your web site
Ire Aderinokun writes:
A few months ago, I wrote about how you can use system fonts in the browser using the built-in keywords that work with the font shorthand property (see Using System Fonts in the Browser).
Relatively recently, some websites and web applications have been adopting a new method for using system fonts in the browser. With this method, the fonts used by different systems are explicitly called themselves in the font-family property.
Read more from the source: bitsofcode
How to use @supports in CSS to specify CSS that targets browsers capable of implementing a certain feature
So when do you want to use @supports? A Feature Query is a tool for bundling together CSS declarations so that they’ll run as a group under certain conditions. Use a Feature Query when you want to apply a mix of old and new CSS, but only when the new CSS is supported.
Let’s look at an example using the Initial Letter property. This new property initial-letter tells the browser to make the element in question bigger — like for a drop cap. Here, the first letter of the first word in a paragraph is being told to be the size of four lines of text. Fabulous. Oh, but I would also like to make that letter bold, and put a bit of margin on its right side, and hey, let’s make it a nice orange color. Cool.
We don’t want to change the color of the letter, or add a margin, or make it bold unless it’s also going to be made bigger by the Initial Letter property. We need a way to test and see whether or not the browser understands initial-letter, and only apply the change to color, weight, and margin if it does. Enter the Feature Query.
Read more from the source: hacks.mozilla.org