Every once in a while someone asks specifically about how to manage CSS performance for a website. What if there's a lot of components? What if there's a lot of animations? What if there's a lot of just CSS?| Frank M Taylor
A decade ago, I was writing about how you should test your user interface on drunk people. It was a semi-serious idea. Some of your users will be drunk when using your app or website. If it is easy for them to use, then it should be easy for sober people to use. Of course, necking a few shots every time you update your website isn't great for your health - so is there another way? Click the "🥴 …| Terence Eden’s Blog
You can't. There is no way to use CSS to apply a style to every letter "E". It simply can't be done. At least, that's what they want you to think… What if I told you there was a secret and forbidden way to target specific characters in text and apply some styles to them? As part of my experiments in creating a "drunk" CSS theme, I thought it would be useful to change the presentation of s…| Terence Eden’s Blog
I recently read a brilliantly provocative blog post called "This website has no class". In it, Adam Stoddard makes the case that you might not need CSS classes on a modern website: I think constraints lead to interesting, creative solutions […]. Instead of relying on built in elements a bit more, I decided to banish classes from my website completely. Long time readers will know that I'm a big f…| Terence Eden’s Blog
Animated example First, let’s define caret. For the scope of this post, I am not talking about the ^ symbol, which evolved from the circumflex. I’m also not talking about the proofreader mark, sometimes rendered as ‸, ⁁, or ⎀. I am talking about the navigation symbol (or insertion caret),…| Adrian Roselli
This is the 15th of the HARC Stack essays. Previous <= Don’t forget – HARC Stack combines HTMX with raku Air, Red and Cro to supply a fresh approach to web development. Two weeks ago…| Raku::Journey
A few things I learned July 14, 2024.| Posts by Ashlee M Boyer
Quickly test your 'loss of content' risk when text is resized.| Posts by Ashlee M Boyer
When users increase their text size, they're not trying to make the space around text bigger.| Posts by Ashlee M Boyer
Fixed heights and widths risk 'loss of content' when text is resized.| Posts by Ashlee M Boyer
Here are a few things I learned today (August 5th, 2023).| Posts by Ashlee M Boyer
Adding a scroll-to-top button with smooth scrolling is as easy as adding a few lines of code.| Posts by Ashlee M Boyer
Repeated code takes up a lot of space. Sass can help you reduce repetitive and similar CSS code.| Posts by Ashlee M Boyer
We don't have to choose between px and rem for spacing| OddBird
The article explains how to design and animate a *circular* menu (that rotates in a circle!) in CSS using offset and animation-composition.| Frontend Masters Boost RSS Feed
You can animate an .svg and it will play even with an `` or `background-image`, making it a viable GIF replacement if you can pull it off!| Frontend Masters Boost RSS Feed
There are usually multiple ways to do the same thing on the web. Sometimes... a lot of ways. Which is "better" can be a matter of taste or which abstraction buys the most value. Check out this CSS example and see which you prefer.| Frontend Masters Boost RSS Feed
Here we go again. It's Monday and that means This Week in WordPress. Your weekly, fun recap of the WordPress news. Join Nathan Wrigley, Courtney Robertson, Tim Nash and Rhys Wynne.| WP Builds
If you thought 2024 was packed with amazing new CSS, well, you're right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.| frontendmasters.com
A society is discovered where social hierarchy is dictated by CSS (Cosmic Social Specificity). The rulers are the `!important` caste, followed by those with inline styles, then IDs, then classes. The crew must start a revolution from the "user-agent-stylesheet" underclass to restore balance.| Seuros Blog - Navigation Logs from the Ruby Nebula
back-in-down | grimoirecss.com
Dear web designers:| catskull.net
The colors and flavors of Autumn offer plenty of design inspiration. The innovative CSS and JavaScript snippets here will allow you to explore the season and sharpen your skills. The post 8 Autumn-Inspired CSS & JavaScript Effects appeared first on Speckyboy Design Magazine.| Speckyboy Design Magazine
This is the 14th of the HARC Stack essays. Previous <= As if you didn’t know, HARC Stack combines HTMX with raku Air, Red and Cro to supply a fresh approach to web development. Hot news th…| Raku::Journey
You can always tell when I’ve been deep into a project when my feed reader stats go off-kilter:| busybee
Setting the box-sizing model to border-box| OddBird
The CSS Working Group| OddBird
Minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.| Pico CSS
(Only Safari Technical Preview!) Awfully cool `random()` is coming in CSS. The design possibilities are quite cool.| frontendmasters.com
All the browsers DevTools have a way of emulating color modes. The are essentially faking the system preference at the application level. Here's where those controls are located and another nice tool.| frontendmasters.com
With CSS View Transitions it is possible to instruct the user agent to show transitions during page navigation. Whilst complex transitions…| Decade City
One of the first deliveries of the National Design Studio is AmericaByDesign — which is deplorable for all.| Frank M Taylor
| Tan Li Hau's Blog
How I managed to keep my website JavaScript-free while still showing my current Spotify status in real-time.| lina.sh
How a misguided attempt to achieve cross platform UI leads to terrible experiences and kills the open web| hugotunius.se
Discover powerful new CSS features like math functions, sibling selectors, interpolate-size, and if() logic. See real-world examples of how modern CSS simplifies styling challenges without JavaScript.| Simple Thread
Random functions in programming languages are amazing.| WebKit
An overview of what makes modern CSS so awesome.| lyra's epic blog
I recently came across this video by Kamran Ahmed, where he demonstrates how to resize any DOM element using just two lines of CSS. And I was like, “What the heck, how did I not know about this all this time?”| Amit Merchant
We’re well over 90% browser support for container size queries, which means we’ve officially entered a new era of responsive web design. The problem is that very few people have gotten the memo. So … consider this the memo! If you’re still clinging to media queries for dear life, it’s time to let go! From […]| Geary.co
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.| iO tech_hub
On October 26th, the Coven of Wisdom held its CSS meetup in Eindhoven. To really allow going deep on CSS and Web UIs, we invited 2 heavy hitters regarding these domains, Brecht De Ruyte en Hidde de Vries.| iO tech_hub
Transform your web app with two lines of code – create seamless animated interactions using the View Transitions API.| iO tech_hub
To use order on one element means using order on each of its siblings, too.| iO tech_hub
Two simple guidelines is all it takes to prevent rampant spacing issues from turning your expertly crafted project into an endless game of whack-a-mole.| iO tech_hub
In general, developers don't find writing CSS the most fun part of software development. Although, in my opinion, Tailwind CSS makes it fun and efficient!| iO tech_hub
Defining a good structure for your theme, components, and files is key to maintaining code for multiple brands. If you're coding multiple applications within one shared codebase, these guidelines will help you out.| iO tech_hub
In the previous part of this article, I tried to tickle your brain a bit to unleash your curiosity and drive your determination to try some new CSS features today. That's exactly what I'll be doing in this part, writing some new stuff today so you can slowly polish new CSS skills very sneaky and hidden in the code, like a ninja.| iO tech_hub
Unless you have no affinity with CSS at all or have been living under a rock for the last year, you should have noticed that new CSS features are skyrocketing like never before. Although this is a good thing, it might get frustrating to get a grasp on all these new playthings because every time you add something new in your styling toolbox, the next best thing is just around the corner.| iO tech_hub
Mastodon shows an Alt button in the bottom right of images that have associated alt text. This button, when clicked, shows the alt text the author has written for the image.| jamesg.blog
Kickstart your next web project with these free Tailwind CSS templates. Find the perfect layout for any project, from simple to advanced. The post 20 Free Tailwind CSS Web Templates for Designers & Developers appeared first on Speckyboy Design Magazine.| Speckyboy Design Magazine
This is the 13th of the HARC Stack essays. Previous <= As if you didn’t know, HARC Stack combines HTMX with raku Air, Red and Cro to supply a fresh approach to web development. Well, Cro h…| Raku::Journey
Happy 30-month anniversary| OddBird
Are you positioning a popover| OddBird
There's a new stretch keyword that we can use for CSS height and width properties. But how is that different from 100%? And how is that different from 100vh when we want a full-height layout?| OddBird
For almost all my projects, I use Tailwind as my CSS framework. I love its ease of use and the development speed it provides. Tailwind comes with a predefined set of colors, which I stick to in my designs.| Kyrylo Silin
We share what have we learned creating PostCSS and the huge ecosystem around it. Get 8 key lessons from Andrey Sitnik, creator of PostCSS.| evilmartians.com
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.| Smashing Magazine
Me to Claude: I think there's a less aggressive way to increase the selector's specificity without using the !important keyword.| Geoff Graham
Using conditional CSS Variables to make it easier to style your site for light mode, dark mode, and more.| ChipLog — Christian Hammond
Added toggle buttons ---| missing.style
JSer.info #744 - Node.js v22.18.0がリリースされました。 Node.js — Node.js v22.18.0 (LTS) このリリースでは、--experimental-strip-typesフラグなしに、TypeScriptの型を取り除いて実行できるようになりました。フラグで無効化したい場合は--no-experimental-strip-typesを指定します。 --- TypeScript 5.9がリリースされました。 Announcing TypeScript 5.9 - TypeScript tsc --initで生成する設定の変更、import deferのサポ...| JSer.info
In this article, Sacha Greif tries to anticipate future CSS trends and takes a look at some far-fetched and futuristic CSS features that might one day make their way to the browser.| Smashing Magazine
As front-end developers, we've wished for a lot of things over the years — ways to center things in CSS, encapsulate styles, set an element’s aspect ratio,| CSS-Tricks
“Flash of unstyled content” has been an issue for the duration of styling. Images used to load extremely slowly, so we didn’t need to worry about flashing things. But with fast internet speeds came responsibility to ensure our content is as accesible as possible. If nothing else, it just feels janky. Like some potentially shady things are going on behind the scenes. In this post, I’ll go over my simple problem and how I solved it using aspect-ratio and a well-placed preload.| catskull.net
This is the 12th of the HARC Stack essays. Previous <= By the way, HARC Stack combines HTMX with raku Air, Red and Cro to supply a fresh approach to web development. My favourite HTMX example is the Active Search. Just so cool to be able to do that with server side code – pure […]| Raku::Journey
This is the 11th of the HARC Stack essays. Previous <= HARC Stack combines HTMX with raku Air, Red and Cro to supply a fresh approach to web development. While the perennial Todo example is not …| Raku::Journey
When I tried setting my| OddBird
| Geoff Graham
There's a newish CSS feature called hyphens that specifies how you want words to be hyphenated when the text wraps. But if you use it, you're going to need to make sure you're also correctly identifying the language. And to understand why that matters, we need to talk about words and syllables.| Frank M Taylor
I’ll breeze through the marketing-speak quickly so as to get to the heart of the matter. I have a new course out, the first one for THE SPICY WEB, called CSS Nouveau. This is my very latest, up-to-date, pedal-to-the-metal thinking on how to build up a 100% vanilla CSS architecture from scratch, from design tokens to global stylesheets to encapsulated components. When people tell me “vanilla CSS doesn’t scale” or “best practices don’t actually work” (which I agree with, but in a ...| The Spicy Web
I’ve been a part of “cults” before, whether that’s being a total Apple fanboy or a total Ruby fanboy or—perhaps more recently—a total web components fanboy.| The Spicy Web
Hello everybody! It’s been a minute since posting here, so I wanted to get you all caught up on the thrilling projects which I’ve recently launched alongside The Spicy Web.| The Spicy Web
Native CSS transitions have quietly killed the strongest argument for client-side routing. Yet people keep building terrible apps instead of performant websites.| Jono Alderson
This is the tenth of the HARC Stack essays. Previous <= HARC Stack combines HTMX with raku Air, Red and Cro to supply a fresh approach to web development. Your patience in stepping through this set of posts is now going to pay off. We already saw how Air::Components are the real meat in the […]| Raku::Journey
This is the eighth of the HARC Stack essays. Previous <=> Next As you are probably tired of reading by now, HARC Stack combines HTMX with raku Air, Red and Cro to supply a fresh approach to w…| Raku::Journey
I've come across a few mentions of the Cool S on the Fediverse these days,| ars
If you're using an image as your background, remember to set a fallback colour as well, especially if you're in dark mode.| alexwlchan
While trying to add some simple overlay labels, I stumbled into a sharp edge of a complex CSS feature called "stacking contexts".| alexwlchan
I've been hacking Firefox CSS to make the "Back" button bigger since 2004.| philwilson.org
Last week, the CSS WG resolved to add an inline if() to CSS. But what does that mean, and why is it exciting? Last week, we had a CSS WG face-to-face meeting in A Coruña, Spain. There is one resolution from that meeting that I’m particularly excited about: the consensus to add an inline if() to CSS. While I was not the first to propose an inline conditional syntax, I did try and scope down the various nonterminating discussions into an MVP that can actually be implemented quickly, discusse...| lea.verou.me
Learn about the new CSS if function, which enables a cleaner developer interface for dynamic styles like style queries and media queries.| Chrome for Developers
| WP Builds
CSS3 offers a ton of brand new ways that you can select elements in ways we've never thought of before. Today I want to focus on exclusively the structural pseudo-classes, which are ways of selecting elements based on the document tree. CSS2.1 limited us to :first-child and IE7 and 8 have done a great job sinceRead More| Frank M Taylor
Reading Time: 14minutesHygenic code is commented code. But often, it can be difficult to understand where, when, or even how to comment your front end code. So I'd like to share a small guide for writing comments in your front-end that makes the developer experience better for everyone.| Frank M Taylor
So the :nth-child structural pseudo class is mighty handy already since it lets you select based on mathematical rules. But to my surprise, it got handier and no one told me. Which makes me think no one told you, either: :nth-child() can do filtering now! A Quick Primer on Structural Pseudo-classes So I wrote aboutRead More| Frank M Taylor
Our app was mysteriously using 60% CPU and 25% GPU on my M2 MacBook.| www.granola.ai
JSer.info #740 - ECMAScript 2025 が正式にリリースされました。| JSer.info
Making a visually appealing range input based on Laravel Cloud's design, native HTML and only a few lines of JavaScript.| Phare blog
One fewer reason to use anything besides native <abbr title="">CSS</abbr>| Sympolymathesy, by Chris Krycho
In recent years CSS has received major improvements which are groundbreaking. Here I'll list some of the most important features.| WaspDev Blog
Font Awesome is truly an awesome library. It is widely used across many websites and has made a web developer's life so much easier!| Dusted Codes
Consider Dash if you’ve ever wanted to create a web browser application using Python. With Dash, you don’t need to be good at using JavaScript, great at Cascading Style Sheets …| Digilent Blog
Team Storybook is a way to host Storybooks in Azure and securely share them with your team| falkus.co
Declan Chidlow takes us on a really interesting tour of the often, under-reported world of print stylesheets, how to use them and also how to debug them.| Piccalilli
This is the seventh of the HARC Stack essays. Previous <= As you know, HARC Stack combines HTMX with raku Air, Red and Cro to supply a fresh approach to web design. Hamburger Menu Go on take a l…| Raku::Journey
Explore powerful updates to PSWriteHTML: use InfoCards, layout Density control, and advanced shadow effects to build clean, responsive PowerShell-generated dashboards and HTML reports.| Evotec
