Search
Weekly Platform News: The :not() pseudo-class, Video Media Queries, clip-path: path() Support
5.2.2021
Hey, we’re back with weekly updates about the browser landscape from Šime Vidas.
In this week’s update, the CSS :not pseudo class can accept complex selectors, how to disable smooth scrolling when using “Find on page…” in Chrome, Safari’s …
The post Weekly...
Happier HTML5 form validation in Vue
3.12.2020
It’s kind of neat that we can do input:invalid {} in CSS to style an input when it’s in an invalid state. Yet, used exactly like that, the UX is pretty bad. Say you have <input type="text" required>. That’s immediately invalid before the user has done anything....
What’s Missing from CSS?
21.11.2020
The survey results from the State of CSS aren’t out yet, but they made this landing page that randomly shows you what one person wrote to answer that question. Just clicking the reload button a bunch, I get the sense that the top answers are:
Container Queries
Parent...
ARIA in CSS
11.11.2020
Jeremey reacting to Sara’s tweet, about using [aria-*] selectors instead of classes when the styling you are applying is directly related to the ARIA state.
… this is my preferred way of hooking up CSS and JavaScript interactions. Here’s [an] old CodePen where you can see...
Winamp Skin Museum
15.9.2020
65,000 skins, they say. That’s extraordinary, especially considering how creative and well done many of them are. MySpace was an even bigger creative explosion of customization.
What’s the next product that will inspire this kind of user ownership through theming? Allowing...
CSS Vocabulary
27.7.2020
This is a neat interactive page by Ville V. Vanninen to reference the names of things in the CSS syntax. I feel like the easy ones to remember are “selector,” “property,” and “value,” but even as a person who writes about CSS a lot, I forget some of the others....
Responsive Styling Using Attribute Selectors
30.6.2020
One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context.
<div class="span-12"</div<!-- we want this for small screens --<div class="span-6"</div<!-- we want this for medium screens --<div...
CSS :is() and :where() are coming to browsers
10.6.2020
Šime Vidas with the lowdown on what these pseudo-selectors are and why they will be useful:
:is() is to reduce repetition¹ of parts of comma-separated selectors.
:where() is the same, but nothing inside it affects specificity. The example of wrapping :where(:not()) is really great, as now there...
Selectors Explained
2.3.2020
Have you ever found yourself either writing a CSS selector that winds up looking confusing as heck, or seen one while reading through someone's code? That happened to me the other day.
Here's what I wrote:
.site-footer__nav a:hover svg ellipse:first-child { }
At the end of it, I honestly couldn't...
A Complete Guide to Data Attributes
18.2.2020
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
The post A Complete Guide to Data Attributes appeared first on CSS-Tricks
CSS4
4.2.2020
Tab Atkins in 2012:
There has never been a CSS4. There will never be a CSS4. CSS4 is not a thing that exists.
Rachel Andrew in 2016:
While referring to all new CSS as CSS3 worked for a short time, it doesn’t reflect the reality of where CSS is today. If you read something...
Is “is” Useful?
3.1.2020
God I'm funny.
Anytime we have fairly repetitive selectors that have a common parent, it's probably a place we can use the :is() pseudo-selector.
Holger Bartel demonstrates like this:
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article...
A Use Case for a Parent Selector
31.12.2019
Having a "parent selector" in CSS is mentioned regularly as something CSS could really use. I feel like I've had that thought plenty of times myself, but then when I ask my brain for a use case, I find it hard to think of one. Well, I just had one so I thought I'd document it here.
A classic...
Highlights from Chrome Dev Summit 2019
22.11.2019
Ire Aderinokun has made another round-up summary of some things that piqued her attention during this year’s Chrome Dev Summit and there’s a lot of exciting news! There’s the :is selector (which Geoff wrote about a while back) as well as logical properties, updates to standard form elements,...
A Super Weird CSS Bug That Affects Text Selection
12.11.2019
You know how you can style (to some degree) selected text with ::selection? Well, Jeff Starr uncovered a heck of a weird CSS bug.
If you:
Leave that selector empty
Link it from an external stylesheet (rather than <style> block)
Selecting text will have no style at all....
Show Search Button when Search Field is Non-Empty
5.11.2019
I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input (<input placeholder="...">) when that placeholder is present. Meaning, the input does not yet have any value. You might think input[value] could do that, or help match on...
Staggered CSS Transitions
14.8.2019
Let's say you wanted to move an element on :hover for a fun visual effect.
@media (hover: hover) {
.list--item {
transition: 0.1s;
transform: translateY(10px);
}
.list--item:hover,
.list--item:focus {
transform: translateY(0);
}
}
Cool cool. But what if you had several list...
How much specificity do @rules have, like @keyframes and @media?
31.7.2019
I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?
To prove that, we can use the same selector inside and outside of an at-rule and see if it seems to affect specificity.
body {
background:...
Don’t comma-separate :focus-within if you need deep browser support
24.7.2019
I really like :focus-within. It's a super useful selector that allows you to essentially select a parent element when any of its children are in focus.
Say you wanted to reveal some extra stuff when a <div> is hovered...
div:hover {
.extra-stuff {
/* reveal it */
}
}
That's...
CSS :not() with Multiple Classes
22.7.2019
Say you want to select an element when it doesn't have a certain class. That's what the :not() selector is for.
body:not(.home) {
}
But what if there are multiple classes you want to avoid?
There are no logical combinators with :not(), like and or or, but you can chain them, which...