The Latest CSS Trends and Innovations
The times for CSS have probably never been more exciting than today. In this quick read, we’ve got some useful CSS tips and techniques for you that you can apply to your work right away. Let’s dive deeper into self-modifying CSS variables, hanging punctuation, and more.
Embracing New CSS Features
If you’ve been in the web development game for longer, you might recall the days when CSS was utterly confusing and you had to come up with hacks and workarounds to make things work. Luckily, these days are over and new features such as container queries, cascade layers, CSS nesting, the :has selector, grid and subgrid, and even new color spaces make CSS more powerful than ever before.
And the innovation doesn’t stop here. We also might have style queries and perhaps even state queries, along with balanced text-wrapping and CSS anchor positioning coming our way.
Delving Into CSS Techniques
With all these lovely new CSS features on the horizon, in this post, we dive into the world of CSS with a few helpful techniques, a deep-dive into specificity, hanging punctuation, and self-modifying CSS variables. We hope they’ll come in handy in your work.
Cascade And Specificity Primer
Many fear the cascade and specificity in CSS. However, the concept isn’t as hard to get to grips with as one might think. To help you get more comfortable with two of the most fundamental parts of CSS, Andy Bell wrote a wonderful primer on the cascade and specificity.
Testing HTML With Modern CSS
Have you ever considered testing HTML with CSS instead of JavaScript? CSS selectors today are so powerful that it is actually possible to test for most kinds of HTML patterns using CSS alone. Heydon Pickering summarized everything you need to know about testing HTML with CSS.
Self-Modifying CSS Variables
The CSS spec for custom properties does not allow a custom property to reference itself. To close the gap, Roman Komarov found a workaround that makes it possible to start involving its behavior.
Hanging Punctuation In CSS
Hanging-punctuation is a neat little CSS property. Jeremy Keith shares a little gotcha to help you fix an unintended side effect of hanging punctuation.
Fixing aspect-ratio Issues
The aspect-ratio property shines in fluid environments. Chris Coyier takes a closer look at three reasons why your aspect-ratio might not work as expected.
Masonry Layout With CSS
CSS Grid has taken layouts on the web to the next level. There are currently two approaches in discussion at the CSS Working Group about how CSS should handle masonry-style layouts.
Boost Your CSS Skills
If you’d like to dive deeper into CSS, we’ve got your back — with a few friendly events and SmashingConfs coming up this year.
Smashing Weekly Newsletter
With our weekly newsletter, we aim to bring you useful, practical tidbits and share some of the helpful things that folks are working on in the web industry. Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime.