Category Archives: CSS

The New System Font Stack?

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

Using Feature Queries in CSS

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:

The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today – Smashing Magazine

EQCSS, an experiment in extending CSS with Element Queries, a way to apply styles based on element-specific conditions


For some time, we’ve run up against the limits of what CSS can do. Those who build responsive layouts will freely admit the frustrations and shortcomings of CSS that force us to reach for CSS preprocessors, plugins and other tools to help us write the styles that we’re unable to write with CSS alone. Even still, we run into limitations with what current tools help us accomplish. Think for a moment of a physical structure. If you’re building a large edifice with weak material, a lot of external support is required to hold it together, and things have to be overbuilt to stay sturdy. When you’re building a website out of HTML, CSS and JavaScript, this external support might look like frameworks, plugins, preprocessors, transpilers, editing tools, package managers and build processes.

Read more from the source: Smashing Magazine