Things You Can Do With CSS Today

Some nice coverage from Andy about CSS things that are truly new. If you haven’t looked at new things in CSS in, say, a year, I’d bet pretty much all of this will be new to you. A lot of …


The post Things You Can Do With CSS Today appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier

Some nice coverage from Andy about CSS things that are truly new. If you haven’t looked at new things in CSS in, say, a year, I’d bet pretty much all of this will be new to you. A lot of it is cutting-edge enough that you might not be able to get it into projects immediately, but that gap is getting pretty short these days. Rough guess, I’d say a year and we’ll be using all this stuff without much thought.

  • Masonry layout (e.g. grid-template-rows: masonry;) which I think was a terribly clever way to approach this long-awaited feature..
  • The :is selector which makes certain selectors way less obnoxious to write (e.g. article :is(h1, h2, h3):not(:first-child)). This makes me wonder why we never had such a thing in Sass that helped with that.
  • Functions like min(), max(), and clamp(), and I think the best practices and clever uses for them are just shaking out. Fluid type is the most obvious and useful example, but only scratches the surface.
  • Units like ch and ex. I really like max-width: 70ch;. There’s a general bit of typography advice that line length should be between 45 and 75 characters long (I made a bookmarklet to test it once), so rather than forcing that with some abstractly related width, you use the actual width of characters as the width.
  • Fancy text-decoration (e.g. text-decoration-thickness: 0.5rem;) meaning we can thicken up an underline without giving up the usefulness that is text-decoration-skip-ink like we would if we had to resort to a border.)

Direct Link to ArticlePermalink


The post Things You Can Do With CSS Today appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier


Print Share Comment Cite Upload Translate Updates
APA

Chris Coyier | Sciencx (2021-02-17T21:20:53+00:00) Things You Can Do With CSS Today. Retrieved from https://www.scien.cx/2021/02/17/things-you-can-do-with-css-today-2/

MLA
" » Things You Can Do With CSS Today." Chris Coyier | Sciencx - Wednesday February 17, 2021, https://www.scien.cx/2021/02/17/things-you-can-do-with-css-today-2/
HARVARD
Chris Coyier | Sciencx Wednesday February 17, 2021 » Things You Can Do With CSS Today., viewed ,<https://www.scien.cx/2021/02/17/things-you-can-do-with-css-today-2/>
VANCOUVER
Chris Coyier | Sciencx - » Things You Can Do With CSS Today. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/17/things-you-can-do-with-css-today-2/
CHICAGO
" » Things You Can Do With CSS Today." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/02/17/things-you-can-do-with-css-today-2/
IEEE
" » Things You Can Do With CSS Today." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/02/17/things-you-can-do-with-css-today-2/. [Accessed: ]
rf:citation
» Things You Can Do With CSS Today | Chris Coyier | Sciencx | https://www.scien.cx/2021/02/17/things-you-can-do-with-css-today-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.