This week the CSS language turns 20 years old and the W3 made a celebratory timeline that marks the most important achievements since the very first email that Håkon Lie sent in 1994. In that email he suggested a “style sheet scheme for HTML documents” and proposed a syntax that looked like this:

h1.font.size = 24pt 100%

Pretty weird, huh? That percentage at the end of the line? That would let developers override the cascade ("a degree of influence"), sort of like a more nuanced !important.

What this anniversary proves though is just how strangely fluid CSS is; everything about it is constantly in flux. Just think about the last few years with native CSS variables, em/rem/vh/vw based design, keyframe animations and transitions, not to mention how responsive design forced us all to ditch what we knew about writing CSS and come up with new concepts for naming and organizing our code.

I hope that in the years to come, our current methods and best practices for writing CSS will look just as bizarre as table layouts and spacer gifs look to us all now. Just think about how CSS grids will change our layouts and how that’ll change our writing methods in turn. Or think about variable fonts. Or Houdini.

Here’s to the next twenty years of CSS! May they be just as weird and brilliant as the last.

From the blog

✻ Chris looks at fluid typography, a typesetting method where you don’t set a fixed value in CSS like font-size: 16px. Instead, you’d set the min and max font-sizes using calc, allowing the text to respond to the width of the browser viewport instead.

The blog posts on CodePen now use this very technique!

✻ Google Analytics can give us information about both the browser window size and the screen resolution of a user’s session. This data is useful since a lot of the time folks aren’t using the whole width of their screen and we should bear that in mind when designing interfaces.

✻ Chris wonders aloud: why is it so difficult for a friend of his to find a designer he can trust? Chris then compares the experience of finding a designer with those of finding a suitable plumber and the results are a little scary. 

✻ Osvaldas Valutis is back in his series of posts about performance, this time on how to lazy-load Disqus comments:

Layout-wise, comments usually play a secondary role. In many cases, comments are never seen at all by the visitors, because the don't scroll down to where they are. But guess what? By default, they get loaded on the website no matter what. The wasted bandwidth is a problem.

Check out the comment thread for that one for some good discussion, including a developer from Disqus chiming in with some clarifications and to defend some of why Disqus does some of the things they do.

In this video, Geoff and Chris sit down together to start to setup Sublime Text from scratch. How do you get started writing code? What kind of settings can you change? The video is from Geoff's perspective as a first-time user and someone coming from Coda, where everything is so project-based. They help us figure all that stuff out. 

So, if you’re interested in jumping into Sublime Text then this video is definitely for you!

✻ Chris had a neat idea: When you hover over a link he thought it would be helpful if you could use the prerender link with JavaScript to automatically load the HTML, CSS and JavaScript from that page. He calls this prerender on hover and if you’re interested in learning more about the different kinds of preloading you can do then we wrote up a bumper post about it last year.

Links from around the web

Andrew Coyle on the many UX problems that crop up when using placeholders and the alternatives:

Providing an example of the needed input helps a user understand the request. However, incorporating the example as placeholder text causes issues including: disappearance on focus, confusion regarding what has been entered, and reduction of the input acting as an affordance. As an alternative, example text can be placed below the input field.

✻ ✻ ✻

In his latest video, Glen Maddern explains why inline SVG is the best SVG. That means you put all of the contents of an SVG directly into the markup itself, instead of as an  tag or an object. That way we can control animations much easier, we can style bits of the SVG with CSS and we can continuously reuse SVGs as icon systems without duplicating our code.

✻ ✻ ✻

Steve Souders wrote about the differences between async and defer. Those are two different methods for loading a JavaScript file, and they’d be used like this:

<script src='thing.js' async></script>
<script src='thing.js' defer></script>

There’s a lot of gotchas with this stuff but generally speaking, here’s how it breaks down:

  • With the async attribute, our scripts will be parsed and executed immediately and they may load out of order
  • With the defer attribute, our scripts will wait until the HTML has been parsed before executing the code and they’ll load in the order you place them in the markup
What are you thinking about this week?

Chris Coyier:  I don't follow people on Twitter based on their political opinions. I follow them, most likely, because they are involved with the web somehow and the web is my career, hobby, and passion. At the moment, I'm following 1,863 people. Yet, during this last major election in the U.S., I got a heaping helping of politics in my Twitter. Toward the end, easily 99% of it was pro-Hillary anti-Trump, which says a lot about the leanings of our industry. 

As the election is now over, and it's Trump who will be taking the White House, I wonder what effect that will have on web tech + government. It wasn't so long ago when there seemed to be a lot of excitement and enthusiasm for organizations like USDS and 18F. Will people be less excited about working under an administration they don't like? Or more excited, because of that "we need you now more than ever" vibe?

An informal poll says it's less appealing to go work for the government:

Check out "Typography is Fragile on the Web", and interview with our own Robin Rendle, as well as "The Last Adventure", Robin's final entry in a series of writing on typography.

Until next time!
Team CSS-Tricks
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list