Quick Hit #181 Firefox 157 (Nightly) ships overscroll-behavior: chain. https://css-tricks.com/quick-hit-181/
Quick Hit #181
Firefox 157 (Nightly) ships overscroll-behavior: chain.
css-tricks.com
CSS-Tricks*
@css-tricks.bsky.social
* A website about making websites: https://css-tricks.com Most posts brought to you by @geoffgraham.me
Quick Hit #180 Chrome 153 becomes the first to implement scroll-axis-lock, , and . https://css-tricks.com/quick-hit-180/
Quick Hit #180
Chrome 153 becomes the first to implement scroll-axis-lock, , and .
css-tricks.com
Quick Hit #179 Chrome 155 (Dev) implements random() (also available in Safari) as well as symbols() (in Firefox). https://css-tricks.com/quick-hit-179/
Quick Hit #179
Chrome 155 (Dev) implements random() (also available in Safari) as well as symbols() (in Firefox).
css-tricks.com
Quick Hit #178 Chrome 155 (Dev) implements margin-trim, following Safari. https://css-tricks.com/quick-hit-178/
Quick Hit #178
Chrome 155 (Dev) implements margin-trim, following Safari.
css-tricks.com
Quick Hit #177 Firefox 155 implements progress(), now Baseline. https://css-tricks.com/quick-hit-177/
Quick Hit #177
Firefox 155 implements progress(), now Baseline.
css-tricks.com
Quick Hit #176 Firefox 155 ships alpha() and advanced attr(), which Chrome also supports (Safari to follow soon). https://css-tricks.com/quick-hit-176/
Quick Hit #176
Firefox 155 ships alpha() and advanced attr(), which Chrome also supports (Safari to follow soon).
css-tricks.com
Lee Meyer: "A person would have to be a special breed of crazy to attempt to polyfill CSS random()." And then he did it.
Let’s Use the Emergent CSS random() Function in all the Browsers
The journey to create a polyfill for the upcoming CSS random() function that works in all browsers.
css-tricks.com
What’s !important #18: , Syntax ::highlight()ing, named-feature(), and More Well, that’s a wrap. No, not a flex-wrap, but rather today marks a new day, week, month, season, aaaand new edition of What’s important (#18), bringing you the best content... https://css-tricks.com/whats-important-18/
What’s !important #18: , Syntax ::highlight()ing, named-feature(), and More
Well, that’s a wrap. No, not a flex-wrap, but rather today marks a new day, week, month, season, aaaand new edition of What’s important (#18), bringing you the best content that developers have produced over the last couple of weeks or so.
css-tricks.com
Quick Hit #175 Safari TP 251 trials comma-separated @container queries in addition to popover=hint. https://css-tricks.com/quick-hit-175/
Quick Hit #175
Safari TP 251 trials comma-separated @container queries in addition to popover=hint.
css-tricks.com
Quick Hit #174 Safari TP 251 trials corner-shape, object-view-box, at-rule(), ident(), inherit(), random(), and random-item(). https://css-tricks.com/quick-hit-174/
Quick Hit #174
Safari TP 251 trials corner-shape, object-view-box, at-rule(), ident(), inherit(), random(), and random-item().
css-tricks.com
We asked @wil.to what it is he likes about JavaScript. Knowing Mat, it's no surprise to hear him talk with affection for all its rough edges. "A little dust on the lens is all part of the charm" as he puts it. We've got a lot of time for this perspective. piccalilli.link/js4e-q-and-a-1
Creating Web Widgets Using the Document Picture-in-Picture API The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it. https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/
Creating Web Widgets Using the Document Picture-in-Picture API
The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it.
css-tricks.com
Quick Hit #173 Chrome 152 ships the autocorrect HTML attribute, making it Baseline, and the alpha() CSS function (Safari and Firefox are to follow shortly). https://css-tricks.com/quick-hit-173/
Quick Hit #173
Chrome 152 ships the autocorrect HTML attribute, making it Baseline, and the alpha() CSS function (Safari and Firefox are to follow shortly).
css-tricks.com
MicroLighter: Syntax Highlighter Syntax highlighting for code blocks without the complicated markup, spans, classes, and bloated JavaScript, courtesy of Uncle Dave. https://css-tricks.com/microlighter-syntax-highlighter/
MicroLighter: Syntax Highlighter
Syntax highlighting for code blocks without the complicated markup, spans, classes, and bloated JavaScript, courtesy of Uncle Dave.
css-tricks.com
Resolved: CSS Class Prefix Selector A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like .prefix-*. https://css-tricks.com/resolved-css-class-prefix-selector/
Resolved: CSS Class Prefix Selector
A newly resolved proposal would allow us to select classes that are a prefix for variations with a wildcard, like .prefix-*.
css-tricks.com
WordPress.com Student Plan As someone who teaches beginning web development, I find that building a WordPress site makes for a great final project to demonstrate the myriad skills covered over the course of a semester — HTML, CSS, design, hosting,... https://css-tricks.com/wordpress-student-plan/
WordPress.com Student Plan
As someone who teaches beginning web development, I find that building a WordPress site makes for a great final project to demonstrate the myriad skills covered over the course of a semester — HTML, CSS, design, hosting, etc. Hosting those projects has always been a roadblock though.
css-tricks.com
An all-too-early look at CSS Navigation Matching. Looks like a nice way to abstract view transitions directly in CSS... though still touch to grok at this early stage.
CSS Navigation Matching, Early Days
Apply a style when someone navigates from one specific page to another. The idea being it'd make the sources for cross-document view transitions declarative in CSS rather than managing that stuff in JavaScript.
css-tricks.com
Quick Hit #172 Firefox 154 ships sibling-count(), sibling-index(), text-box-trim, text-box-edge, and text-box, which are now Baseline. https://css-tricks.com/quick-hit-172/
Quick Hit #172
Firefox 154 ships sibling-count(), sibling-index(), text-box-trim, text-box-edge, and text-box, which are now Baseline.
css-tricks.com
Summing up what I think is a delightful discourse sparked by @lea.verou.me on a UI/UX topic that's needed some revisiting. css-tricks.com/dark-mode-to...
Dark mode toggles: two states are enough | CSS-Tricks
Lea's pushing back on light/dark mode implementations that display three state options for visitors: light, dark, and system.
css-tricks.com
What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still more. Basically, how to do a lot... https://css-tricks.com/whats-important-17/
What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More
Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still more. Basically, how to do a lot of really cool (CSS) stuff.
css-tricks.com
Quick Hit #171 Chrome 154 (Dev) trials frame-sizing (for responsive iframes). https://css-tricks.com/quick-hit-171/
Quick Hit #171
Chrome 154 (Dev) trials frame-sizing (for responsive iframes).
css-tricks.com
So, you got the ol' "Blocked aria-hidden" console warning. No error, no worry, right? Think again. And it's tougher to solve than most of the suggested fixes. css-tricks.com/blocked-aria...
Blocked aria-hidden: The Warning is Right, and Every Fix You've Found is Wrong | CSS-Tricks
The warning is correct. And the recommended fixes you've probably seen are wrong. Here's what you can do instead to properly fix the issue.
css-tricks.com
Very clever examples from @preethisam.bsky.social animating border-image. Super easy to forget it's animatable in the first place. That radial gradient one is just... 😍 css-tricks.com/animating-cs...
Compiled some notes on the <dialog> element — feel free to add yours to it! css-tricks.com/using-and-st...
Using and Styling the Dialog Element | CSS-Tricks
There's a lot of nuance to the <dialog> element, a seemingly little piece of web architecture. I've got some notes from digging into it.
css-tricks.com
I've been meaning to look into ::highlight() for a while and this is just the run down I was looking for. A great read from @sunkanmifafowora.bsky.social.
Piccalilli@piccalil.li · last mo.Using a baseline of piccalil.li/blog/working...
Well crap, thanks folks! What a thing to come back to after a nice long AFK break. 🧡 And high-fives to @sachagreif.com for always knocking out these surveys. ✋
Going live at twitch.tv/wiltostreams / youtube.com/live/h86h-Ck... in fifteen to bash out tomorrow’s JavaScript for Everyone newsletter. I’m burnt out on writing about The Writing, so let’s make this one a mini-lesson, on the house — come join, and bring your JavaScript questions and topic requests.
WiltoStreams - Twitch
I’m Wilto, from websites.
twitch.tv
Do you miss community forums? Like, you would use one if it was available and related to something you're interested in / have questions about? We had one for many years. I haven't been tempted to restart it because it seems like more effort than community benefit... maybe?
Gap Decorations have changed a BUNCH since they went from experimental to shipping in Chrome and Edge. Here's Microsoft's Sam Davis Omekarajr building off an example @patrickbrosset.com did for us a while back to demo what's new. css-tricks.com/css-gap-deco...
Gap Decorations Are Now Available, Here’s What’s New | CSS-Tricks
Today, with CSS gap decorations fully supported in Chrome and Edge, starting with version 149, you can now very easily style gaps, and with a lot of control.
css-tricks.com