CSS Icon

CSS

Styling the web and views since 1996.
89 Stories
All Topics

Eric Meyer meyerweb.com

It’s time to get static

Eric Meyer says…

If you are in charge of a web site that provides even slightly important information, or important services, it’s time to get static.

…too many sites are already crashing because their CMSes can’t keep up with the traffic surges. And too many sites are using dynamic frameworks that drain mobile batteries and shut out people with older browsers. That’s annoying and counter-productive in the best of times, but right now, it’s unacceptable.

Eevee eev.ee

Old CSS, new CSS

Need a history lesson of CSS and web design? Take a long journey with Eevee on the subject…

I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, it was horrendous. I mean, being able to make stuff and put it online where other people could see it was pretty slick, but we did not have very much to work with.

I’ve been taking for granted that most folks doing web stuff still remember those days, or at least the decade that followed, but I think that assumption might be a wee bit out of date. Some time ago I encountered a tweet marvelling at what we had to do without border-radius. I still remember waiting with bated breath for it to be unprefixed!

Tyler Sticka cloudfour.com

Far future CSS snippets

Tyler Sticka did some pondering:

The other day I was using CSS grid and custom properties to solve some problems that would have seemed almost impossible only a year or two ago. This made me wonder: What CSS could I be writing in a few years that might seem far-fetched today?

Container queries, content-aware SVG, click/touch target sizing are just a few of the CSS features Tyler can’t wait to get his editor on.

CSS sscaffold-css.com

Sscaffold – lightweight css for people who build things

sscaffold combines css rules from normalize.css, skeleton.css, and milligram into a single, reorganized, easy-to-use css file, with bugfixes and a few other updates and additions. It emphasizes sensible defaults and semantic HTML.

This library (not framework) looks like a good starter for many projects.

The single file is human-readable, commented, includes credits to original authors, and is designed to be easily customized.

HTML almanac.httparchive.org

The HTTP Archive's first annual *state of the web* report

Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. It is comprised of 20 chapters spanning aspects of page content, user experience, publishing, and distribution.

There’s so much to digest here. 85 contributors! Quite an achievement and one that I’m excited to dig in to.

Rachel Andrew Smashing Magazine

Everything you need to know about CSS margins

Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a margin than you might think.

No kidding! Margin collapsing has got to be one of the hardest things about CSS for new developers, and this article not only goes into it and how to avoid it, but explains the “why” behind it.

CSS-Tricks Icon CSS-Tricks

Animating with clip-path

I’ve always felt a little put off by the clip-path property, thinking it was rather obscure and probably not worth learning. Boy was I wrong. In this article Travis Almand takes us through how incredibly powerful this property is, and how by animating it you can create a range of beautiful transition effects with a few simple lines of CSS.

Smashing Magazine Icon Smashing Magazine

CSS custom properties in the cascade

A brilliant look at how CSS custom properties allow you to both utilize the cascade and provide some level of scoping and proximity-based styling. Prior solutions include the ‘big blunt hammer’ of inheritance-based styling or ignoring the cascade completely utilizing methodologies like BEM, but as author Miriam Suzanne points out:

Custom properties provide a new, browser-native solution; they inherit like any other property, but they don’t have to be used where they are defined.

CSS browserlondon.com

The perils of functional css (atomic css)

There’s been a lot of buzz recently about things like Tailwind and functional/utility-first CSS (for more on that, check out JSParty #65 with the creator of Tailwind), but there has also been some pushback against the approach. This article spells out some of the concerns, and why this may be more of a reaction against learning CSS than a new best practice.

Author Jay Freestone, after summing up a series of challenges:

In summary, functional CSS doesn’t make much sense to me, as a front-end developer. I’d suggest that a dedicated front-end team would be more productive managing their own CSS approach, rather than being tied into the straitjacket of a standardised class library.

CSS github.com

Enjoy writing CSS in your JS? Try writing JS in your CSS! 😏

First off, everything happens in your CSS file. You can layer this into your websites as you see fit. You can use this to layer on just a little bit more functionality in your CSS here and there or construct an entire page. It’s up to you!

If you think this sounds crazy… just wait until you have a look at it:

.item {
  cursor: pointer;
  --js:(
    function toggle() {
      this.classList.toggle('active');
    }
    this.addEventListener('click', toggle );
  );
}

Play around with CJSS on Codepen, but that’s all I’d advise you to do with it (as would the author).

Rachel Andrew rachelandrew.co.uk

Grid, content re-ordering and accessibility

CSS Grid is a wonderfully powerful technology, making possible incredibly complex and interesting layouts with fractions of the effort of older tools. But with great power comes great responsibility, for it is now also very easy to shoot the accessibility of your site in the foot.

Author Rachel Andrew:

I think this is something we sorely need to address at a CSS level. We need to provide a way to allow the tab and reading order to follow the visual order. Source order is a good default, if you are taking advantage of normal flow, a lot of the time following the source is exactly what you want. However not always, not at every breakpoint. If we don’t give people a solution for this, we will end up with a mess.

0:00 / 0:00