Collective #668
1.7.2021
Indiepen * The State Of Web Workers In 2021 * What's new in ES2021 * Temporal
The post Collective #668 appeared first on Codrops
WDRL — Edition 290: CSS Flexgrids, image performance and selectors
1.7.2021
Hey,
this time we’re going to look deeply into a lot of CSS articles together with optimising images. In CSS, we get nice tools that help us create better layouts, faster. We also look at new technologies like parent selectors, like responsive images in CSS, reverting CSS settings and container...
How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?
30.6.2021
I got this exact question in an email the other day, and I thought it would make a nice blog post because of how wonderfully satisfying this is to do in CSS these days. Plus we can sprinkle in polish …
The post How do you make a layout with pictures down one side of a page matched up with...
When a Click is Not Just a Click
30.6.2021
The click event is quite simple and easy to use; you listen for the event and run code when the event is fired. It works on just about every HTML element there is, a core feature of the DOM API.…
The post When a Click is Not Just a Click appeared first on CSS-Tricks. You can support...
Fixing a Bug in Low-Resolution Mode
30.6.2021
I was working on a bug ticket the other day where it was reported that an icon was sitting low in a button. Just not aligned like it should be. I had to go on a little journey to figure …
The post Fixing a Bug in Low-Resolution Mode appeared first on CSS-Tricks. You can support CSS-Tricks...
How to Code the K72 Marquee Hover Animation
30.6.2021
Learn how to recreate the direction-aware marquee menu hover effect seen on the website of K72 by Locomotive.
The post How to Code the K72 Marquee Hover Animation appeared first on Codrops
What does `font: 110%/1.4 system-ui` mean?
30.6.2021
I use this line, or one like it, in a lot of quick demos. Not that it’s not a production-worthy line of code—I just tend to be a bit more explicit on bigger projects.
html {
font: 110%/1.4 system-ui;
}
…
The post What does `font: 110%/1.4 system-ui` mean? appeared first...
Chromium spelling and grammar features
29.6.2021
Delan Azabani digs into the (hopefully) coming soon ::spelling-error and ::grammar-error pseudo selectors in CSS. Design control is always nice. Hey, if we can style scrollbars and style selected text, why not this?
The squiggly lines that indicate...
:nth-child Between Two Fixed Indexes
29.6.2021
I needed to select some elements between two fixed indexes the other day — like literally the second through fifth elements. Ironically, I have a whole post on “Useful :nth-child Recipes” but this wasn’t one of them.
The answer, it …
The post :nth-child Between Two Fixed...
System *Things
29.6.2021
I think we’re all largely aware of named colors in CSS:
color: OldLace;
background: rebeccapurple;
I guess you’d just call those “named colors” in CSS.
Those aren’t the only kind of named colors there are though. Some of them …
The post System *Things appeared...
Working around the viewport-based fluid typography bug in Safari
28.6.2021
Sara digs into a bug I happened to have mentioned back in 2012 where fluid type didn’t resize when the browser window resized. Back then, it affected Chrome 20 and Safari 6, but the bug still persists today in Safari …
The post Working around the viewport-based fluid typography bug...
Positioning Overlay Content with CSS Grid
28.6.2021
Not news to any web developer in 2021: CSS Grid is an incredibly powerful tool for creating complex, distinct two-dimensional modern web layouts.
Recently, I have been experimenting with CSS Grid and alignment properties to create component layouts that …
The post Positioning Overlay Content...