:focus-visible-within, the missing pseudo-class
Taking a closer look at the CSS focus pseudo-classes and exploring the differences between them to find out how you can style elements the way you want in all scenarios.
The quiet, pervasive devaluation of frontend - Josh Collinsworth blog
I keep noticing those of us in the frontend field being treated much the same as nurses, paralegals, and executive assistants. Our work is seen as important, certainly, but just not the same as, or as important as, the “real” work.
Okay, Color Spaces — ericportis.com
What is Utility-First CSS?: HeydonWorks
It turns out, people in tech are particularly bad at distinguishing between paradigm shifts and paradigm sharts.
spider-pig Searches for Nodes that match a CSS Selector—zachleat.com
A post by Zach Leatherman (zachleat)
My CSS resets
Every now and then, I see someone post their latest and greatest set of CSS resets. Here’s mine.
Embrace the Platform
At the end of 2021, CSS-Tricks (RIP) asked a bunch of authors “What is the one thing people can do to make their websites better?”. This here, is my submission for that end-of-year series.
CSS Wrapped: 2023! | Blog | Chrome for Developers
2023 was a huge year for CSS! Learn about what landed in Chrome and across the web platform this year.
A (more) Modern CSS Reset - Andy Bell
I wrote A Modern CSS Reset almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version. I know I also have a terrible record with open source maintenance, so I thought […]
Complementary Space
Design spacing tokens semantically
CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends — Smashing Magazine
I'm big on [modular design](https://www.smashingmagazine.com/2016/06/designing-modular-ui-systems-via-style-guide-driven-development/). I've long been sold on dividing websites into components, not pages, and amalgamating those components dynamically into interfaces. Flexibility, efficiency and maintainability abound.
CSS { In Real Life } | Reducing Complexity in Front End Development
Tips, tricks and tutorials on the web’s most beautiful language.
Think before you npm install
instead of doing it automatically every time, let’s take the time to pause and consider whether we really need to.
Tailwind and the Femininity of CSS
Why we undervalue front-end expertise in the web development world.
The important bit is that they hinder deep learning of CSS. This is not to say that every developer needs to have intimate knowledge of CSS when launching a personal project, but that major businesses need to invest in hiring front-end designers that specialize in this area. Many self-proclaimed full-stack developers don’t know how to write good and/or modern CSS. Hiring and promotion evaluations require developers to show deep skill in a variety of languages, but CSS is not often included. For many engineering teams, design is just a flourish, and a developer with rudimentary skill in CSS is good enough as long as they can tack on a framework that takes care of most of the heavy lifting. That heavy lifting, unfortunately, doesn’t account for the human time and care needed for things like accessibility. The joke for many designers is that it’s incredibly easy to see what kind of site uses something like Bootstrap because no effort was put into customizing it.
There are surely plenty of people of marginalized gender experience in all programming spaces, but they don’t have as much opportunity to surface new ideas. CSS is only allowed some slight breathing room simply because other programmers don’t even consider it to be part of web development. The distinction is even clearer when you consider the differences between front-end and backend salaries. CSS having any validity in the field while maintaining its feminine image is a threat to the notion that programming is a masculine exercise.
CSS being a feminine language isn’t a bad thing. Quite the contrary, I’d argue that all programming is feminine as it was pioneered by women (who were then pushed out by men). And while the web development community is still very much governed by men, a larger portion of the top voices in the front-end space are more feminine-identifying than in other areas. Consequently, these same voices are the ones that are brigaded with hate after daring to disagree with dominant ideas.
Reluctant Gatekeeping: The Problem With Full Stack
Much of my career as a web designer has been spent, quite happily, working alongside programmers, engineers, people with computer science…
We need to identify exploitation. While there are some gleeful Full Stack Developers, many are computer scientists given too many responsibilities, and over things for which they are not willing or qualified to be held accountable.We need to address the undervaluing of HTML and CSS for what it is: gender bias. Even though we wouldn’t have computer science without pioneering women, interloping men have claimed it for themselves. Anything less than ‘real programming’ is now considered trivial, silly, artsy, female. That attitude needs to eat a poisoned ass.We need to revisit the separation of concerns principle. We simply can’t afford for people to have to know everything just to do something. It’s good that we conceptualize designs in terms of self-contained components now, but that can be a mental model without being a technology-specific land-grab.Most of all, we need to educate people who don’t code at all just how many different things different types of code can do, and how different each is to understand and write. Hopefully, this way, more of us will be writing the kind of code that suits us best, and not spending our time anxious and demoralized because we don’t know what we’re doing, or we simply have too much on our plate. That’s not to say that if you do take to JS, CSS, HTML, SQL, and C# you shouldn’t be writing all of them if you‘d like to and you have enough time!
What’s new in CSS - WWDC23 - Videos - Apple Developer
Explore the latest advancements in CSS. Learn techniques and best practices for working with wide-gamut color, creating gorgeous...
Watch Out for Layout Shifts with ‘ch’ Units
Since `ch` units are based on your current font their value can change when fonts are loaded and cause unexpected layout shifts.
Re-evaluating px vs em in Media Queries
We used to say ems were the best unit to use in media queries.
Is that still the case in 2023?
Responsive design: seams & edges
In some ways, responsive design was an attempt to move past the idea of a “page.” How’s that worked out for us?
as soon as a page is published online, we can’t predict how someone experiences it. Their screen might be wildly smaller or larger than mine, sure. But any number of factors might change the user’s experience: their network might be punishingly slow; their data plan could be stringently capped; they may use their voice to interact with my design; they may not see the screen like I do. In other words, we’ve never had any kind of control on the Web. And that lack of control can feel scary, sure — but if we approach it properly, it can be incredibly powerful.
codedisplay: contents/code considered harmful
Thinking on ways to solve color palettes
In today's GUI Challenge, @AdamArgyleInk builds a wide gamut color palette with okLCH, checking accessible color pairs along the way, inspecting color with d...
Building an accessible theme picker with HTML, CSS and JavaScript. by Sarah L. Fossheim
In this tutorial, we’ll use HTML, CSS, and vanilla JavaScript to add an accessible theme picker component to a website.
Don’t use custom CSS scrollbars
While a custom CSS scrollbar may seem flashy and fun, consider that it may present a significant, unnecessary barrier to access…
The webdev social schism
I’m concerned about what the Twitter/Mastodon/BlueSky debate means for the webdev community at large. Have we split ourselves in two?
Scott Kellum – Mapping Typography – btconf Düsseldorf 2023
The websites we make are nothing less than multi-dimensional objects: the size and shape of them change with every device and browser they are viewed on. We have lots of new tooling to develop layouts for this multi-dimensional landscape, but one crucial element seems to have resisted our attempts at tooling: our typography. How does our typography both maintain meaningful structure while flexing across our dynamic website space? In this talk, we’ll explore that problem. We will make a map of how text and typography behave in our website landscape, and then take these maps and apply them using CSS animations. In this way, we’ll drive dynamic interpolations across our websites' multiple dimensions.
-----
About Scott Kellum
Scott Kellum is the founder of Typetura, a typography as a service company offering both bespoke and ready-made typographic solutions. With over 15 years of design experience across type, editorial, digital, and print design; Scott’s experience gives him a unique perspective on the typographic challenges and opportunities in the design industry. He has invented multiple web technologies, holds two patents, and has contributed to major projects at Vox Media, Darden Studio, and Roger Black Studio. These accomplishments include inventing dynamic typographic systems, high impact ad formats, new parallax techniques, and the fluid typesetting technology that powers Typetura itself.
-----
This talk was held at the "beyond tellerrand" conference 2023 in Düsseldorf: More information about beyond tellerrand (#btconf in short) here: https://beyondtellerrand.com
beyond tellerrand is the affordable single-track event where creativity and technology meet in a renowned, familiar and friendly atmosphere.
Mastodon: https://mastodon.social/@btconf
Linkedin: https://www.linkedin.com/groups/3808125/
Instagram: https://instagram.com/btconf
Twitter: https://twitter.com/btconf
A Responsive Accessible Table
Painfully slow demonstration of the example table resizing and different media queries kicking in. After writing (again) that it is ok to use tables, and after providing quick examples of responsive tables, I received questions about why I used some of the code I did. I am going to attempt…
CSS HD Gradients
Wide gamut Color 4 complaint CSS gradient builder.
CSS Custom Properties Beyond the :root · Matthias Ott – User Experience Designer
Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design, Kiel.
Container Query Units and Fluid Typography | Modern CSS Solutions
To learn more about the behaviors of container query units, we'll explore three fluid typography techniques applied via a "mixin" using custom properties. These upgraded methods will produce truly responsive typography, regardless of context.
A look at CSS Resets in 2018 | bitsofcode
Articles on frontend development and more.
Sibling Scopes in CSS, thanks to :has() and ~
Leverage CSS :has() to select all siblings between two element boundaries.