CSS

1304 bookmarks
Custom sorting
Alternating Style Queries
Alternating Style Queries
With the container style queries on the horizon, it is a good time to do more experiments with them. In one of my recent experiments, I found out that style queries will allow us to do what the currently specified (but not implemented by anyone) function `toggle()` was supposed to.
·kizu.dev·
Alternating Style Queries
Things That Can Break aspect-ratio in CSS – Frontend Masters Boost
Things That Can Break aspect-ratio in CSS – Frontend Masters Boost
CSS has an aspect-ratio property, which has had full support since around 2021. It can be a very satisfying property to use, because it can help match how your brain 🧠 works or what the desired design outcome does better than forcing dimensions does. “I need a square here” or “I need to match the […]
·frontendmasters.com·
Things That Can Break aspect-ratio in CSS – Frontend Masters Boost
Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
Remember the HTML `` element? It’s deprecated, so it’s not like you’re going to use it when you need some sort of horizontal auto-scrolling feature. That’s where CSS comes in because it has all the tools we need to pull it off. Silvestar Bistrović demonstrates a technique that makes it possible with a set of images and as little HTML as possible.
·smashingmagazine.com·
Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
Playing with Infinity in CSS
Playing with Infinity in CSS
CSS has an infinity constant. When I first learned about this, my brain lit up with all kinds of absurd possibilities. Let’s discuss! There might even be some...
·codersblock.com·
Playing with Infinity in CSS
You Want border-color: transparent, Not border: none
You Want border-color: transparent, Not border: none
If you find yourself removing a border from an element that has a border and are tempted to use border: 0 , border: none, or outline: none, I’d urge you to stop for a moment and reconsider. It’s li…
·frontendmasters.com·
You Want border-color: transparent, Not border: none
Going beyond pixels and (r)ems in CSS - Container query length units - iO tech_hub
Going beyond pixels and (r)ems in CSS - Container query length units - iO tech_hub
In the third part of this series, we’ll look at length units based on the container. Yes, you heard that right, we can finally get some measurements based on a containing element and that just spells awesome in my book. Currently available in all evergreen browsers, these units open up a lot of opportunities to create some smart systems and once again, I will write this up packed with a bunch of demos and cool use cases.
·techhub.iodigital.com·
Going beyond pixels and (r)ems in CSS - Container query length units - iO tech_hub
Going beyond pixels and (r)ems in CSS - Relative length units based on the viewport - iO tech_hub
Going beyond pixels and (r)ems in CSS - Relative length units based on the viewport - iO tech_hub
In this second part of the series, let’s talk about units based on the viewport also known as "the viewport-percentage length units". A lot of developers know these, but they can create some unexpected behavior, especially in combination with scrollbars and mobile behavior. Based on some articles and videos I picked up on the web from time to time, I'd like to explain some of the common pitfalls when using viewport units.
·techhub.iodigital.com·
Going beyond pixels and (r)ems in CSS - Relative length units based on the viewport - iO tech_hub
12 Modern CSS One-Line Upgrades | Modern CSS Solutions
12 Modern CSS One-Line Upgrades | Modern CSS Solutions
Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.
·moderncss.dev·
12 Modern CSS One-Line Upgrades | Modern CSS Solutions
CSS Relative colors - iO tech_hub
CSS Relative colors - iO tech_hub
Before the relative color syntax you had to rely on CSS variables or even worse: JavaScript to modify the parameters of a color. Using the from keyword the browser can convert the originating color to different color spaces and change the color properties.
·techhub.iodigital.com·
CSS Relative colors - iO tech_hub
The `hanging-punctuation` property in CSS
The `hanging-punctuation` property in CSS
(I did a Twitter thread on this a while back, against my better judgment, and now moving to a proper blog.) The hanging-punctuation property in CSS is almost a no-brainer. The classic example is a …
·chriscoyier.net·
The `hanging-punctuation` property in CSS
New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem — Smashing Magazine
New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem — Smashing Magazine
Since the introduction of CSS viewport units in 2012, many of us have been using `width: 100vw` as a way to set an element’s width to the full width of the viewport. But, as Šime Vidas explains in this deep dive, `100vw` does not always represent the full width of the viewport due to differences in how browsers handle scrollbars.
·smashingmagazine.com·
New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem — Smashing Magazine
Anchor Positioning | 12 Days of Web
Anchor Positioning | 12 Days of Web
Anchor Positioning is an incoming dynamic addition to enhance the capabilities of CSS positioning.
·12daysofweb.dev·
Anchor Positioning | 12 Days of Web
A Few Ways CSS Is Easier To Write In 2023 — Smashing Magazine
A Few Ways CSS Is Easier To Write In 2023 — Smashing Magazine
We’re living in somewhat of a CSS renaissance with new features, techniques, experiments, and ideas coming at us to an extent we haven’t seen since “CSS3”. It’s easy to feel overwhelmed when your profession seems to be advancing at breakneck speed, but Geoff Graham considers the ways “modern” CSS in 2023 has actually made CSS “easier” to write.
·smashingmagazine.com·
A Few Ways CSS Is Easier To Write In 2023 — Smashing Magazine