Author: Chris Coyier

Posted on

You want enabling CSS selectors, not disabling ones

Category Image 052

I think this is good advice from Silvestar Bistrović:

An enabling selector is what I call a selector that does a job without disabling the particular rule.

The classic example is applying margin to everything, only to have to remove it from the final element because it adds space in a place you don’t want. 

.card {
  margin-bottom: 1rem;
}

/* Wait but not on the last one!! */
.parent-of-cards :last-child {
  margin-bottom: 0;
}

You might also do…

/* "Disabling" rule */
.card:last-child {
  margin-bottom: 0;
}

But that’s maybe not as contextual as selecting from the parent.

Another variation is:

.card:not(:last-of-child) {
  margin-bottom: 1rem;
}

That’s what Silvestar refers to as “enabling” because you’re only ever applying this rule — not applying it and then removing it with another selector later. I agree that’s harder to understand and error-prone.

Yet another example is a scoped version of Lobotomized Owls:

/* Only space them out if they stack */
.card + .card {
  margin-top: 1rem;
}

I think gap is where this is all headed in the long term. Put the onus on the parent, not the child, and keep it an enabling selector:

.parent-of-cards {
  display: grid;
  gap: 1rem;
}

Direct Link to Article — Permalink

The post You want enabling CSS selectors, not disabling ones appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

A More Tab-Like Look

Featured Imgs 23

We’ve got lots of plans for the Pen Editor on CodePen. Of course we do! This is the heart and soul of CodePen. The thing where all the great stuff on CodePen is actually produced. Down the road, there will be more big-bangs where the editor evolves to do bigger and better things (but don’t worry, it’ll keep it’s signature simplicity). But the temper the biggness of those bangs, we’re releasing parts of it along the way that shift some of the look and functionality of the editor.

There has been other small stuff, like the Save Pen Dropdown, and you might have noticed some aesthetic changes to the Export and Share menus:

But this update to the look of the editors themselves is probably the most noticeable change yet. No functionality changes here, just aesthetic again.

The post A More Tab-Like Look appeared first on CodePen Blog.

Posted on

“We had 90% unused CSS because everybody was afraid to touch the old stuff”

Category Image 052

Over at the JS Party podcast:

[Kend C. Dodds]: […] ask anybody who’s done regular, old CSS and they’ll tell you that “I don’t know if it’s okay for me to change this, so I’m gonna duplicate it.” And now we’ve got – at PayPal (this is not made up) we had 90% unused CSS on the project I was using, because everybody was afraid to touch the old stuff. So we just duplicated something new and called it something else. And you might just say that we’re bad at CSS, but maybe CSS was bad at us, I don’t know… [laughter]

[Emma Bostain]: Well, that’s why styled-components and CSS-in-JS was so pivotal; it was like “Oh, hey, we can actually encapsulate all of this logic inside the component that it’s touching and don’t have to worry about bleeding code anymore.” It’s so much easier to delete things, and add things, and all of those things.

[Kend C. Dodds]: Yeah, you’re precisely right. That was the problem that those things were made to solve.

Audio clip:

I’ve heard this exact story before several times, usually from large companies. Lots of developers, typical developer turnover… nobody knows what CSS is actually used and what isn’t because that is a very hard problem.

That’s one of the reasons I sometimes like component-based-styling solutions (CSS-in-JS, if you’re nasty). Not because I love complex tooling. Not because I like JavaScript syntax better than CSS. Because of the co-location of styles and componentry. Because nobody is afraid of the styles anymore — they are tightly coupled to what they are styling. It’s not needed on every project, but if you’re building with components anyway (an awfully nice way to architect front-ends that doesn’t require JavaScript), you might as well style this way.

For this reason, I’m excited that “scoped styles” are making a bit of a comeback in standards discussions.

I remember an ancient idea (that maybe even shipped in browsers for a minute?) where you’d just chuck a <style scoped> block right in the HTML and whatever the parent was, the styles were scoped to that parent. That was so cool, I wish we could have that again.

But it seems like the newer stuff (here’s Miriam’s original proposal) has some more clever stuff that that basic concept doesn’t cover — like being able to set a lower-boundary in addition to an upper-boundary, making it possible to scope “donut-shaped” styles in the DOM (a Nicole Sullivan term). Whatever happens, shadow DOM-free scoped styles with zero tooling is huge.

The post “We had 90% unused CSS because everybody was afraid to touch the old stuff” appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

Tabs in HTML?

Category Image 052
You know what tabs are, Brian.

I mean… You use them every day, on every OS. Everybody knows they exist in every toolbox. All that’s left is to “just pave the cowpaths!” But when you get right down to it, it’s a lot more complicated than that.

Brian Kardell shares a bit about the progress of bringing “Tabs” to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It’s tricky. Then, even if you settle on a solid definition, an HTML expression of that isn’t exactly clear. There are all kinds of expressions of tabs that all make sense in their own way. Imagine marking up tabs where you put all the tabs as a row of links or buttons up top, and then a bunch of panels below that. They call that a “Table of Contents” style of markup, and it makes some kind of logical sense (“the markup looks like tabs already”). But it also has some problems, and it looks like sections-with-headers is more practical (“If you have the heading, you can build the TOC, but not vice-versa”). Spicy sections are a totally different pattern. And that’s just one problem they are facing.

I don’t envy the work, but I look forward to the progress in no small part because authoring tabs is tricky business. Not hard to do, but very hard to do right. I’ve talked in the past about how I’ve built tabs many times in jQuery where just a click handler on a row of links hides or shows some matching divs below. That “works” if you ignore accessibility entirely (e.g. how you navigate between tabs, focus management, ARIA expectations, etc).

Here’s the ShopTalk discussion and here’s a different perspective in a chat I had with Stephen on CodePen Radio where we get into our <Tabs /> React component on CodePen.

Direct Link to Article — Permalink

The post Tabs in HTML? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

Unicode Arrows

Category Image 052

Looks like… 253 of them. I love the little water ⥾ spout one. (U+297e). Because. And I like how it’s a fairly useful little site at a great domain and with a little business model behind it.

Reminds me of a little feature I like in Notion where if you type dash-arrow (like ->) it turns into → — but intelligently — like it doesn’t do that with inline code or a code block.

Direct Link to Article — Permalink

The post Unicode Arrows appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

Wanna see a whiter white?

Category Image 052

Heck of a CSS trick here from Dongsung Kim.

There are hidden HDR videos playing at the corners of this page. When a HDR-capable browser encounters one, it switches to HDR mode. For some reason, CSS backdrop-filter + brightness >100% combo seems to behave like HDR—reaching beyond the user-controlled display brightness, up to the maximum HDR brightness—while the everything in between follow[s] along. At least that’s the overall idea, but I still don’t know exactly why it works; especially why with those two CSS properties.

As I look at that demo in Chrome, I see an extra-white text-shadow. In Safari, I see extra-white text. In Firefox, the whites match so I see nothing. Probably a bug.

I wouldn’t recommend actually using the trick, as I’d think the extra-whiteness almost certainly takes extra battery power that a user isn’t opting into, even without the video playing—even though it does feel like a bummer that our screens are capable of whiter whites than we normally have access to. The good news is that the gamut of color on the web is expanding, generally.

Direct Link to Article — Permalink

The post Wanna see a whiter white? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

#328: Large Scale Planning

Featured Imgs 23

Chris and Klare chat about the incredibly daunting task of planning a project that is huge and long-term. We know we’re pretty OK at planning smaller-scale projects. We plan, we kanban, we get the job done. But a single basic kanban isn’t going to cut it for a truly gigantic project. We get into talking about chopping the project into phases, chopping those phases into sections (sometimes with their own phases), and a databasing/kanbaning strategy to tie it all together. This also touches GitHub workflows and meeting structures, so there is a lot to think through here and it requires constant effort.

Time Jumps

  • 01:19 How do you plan well?
  • 05:17 The vision has happened – now what?
  • 08:18 Sponsor: WordPress Growth Summit
  • 09:29 The known unknowns
  • 18:58 Breaking Phases down into Sections
  • 24:27 Deadlines vs speed
  • 29:08 Using GitHub to manage projects

Sponsor: WordPress.com Growth Summit

The WordPress.com Growth Summit is coming up August 17th (Americas & EMEA) and August 18th (Asia Pacific) and is focused on running a business with a WordPress website as a core.

Get expert advice on how to design your site, write effective copy, attract traffic, build a community, and earn money.

The post #328: Large Scale Planning appeared first on CodePen Blog.

Posted on

gridless.design

Category Image 052

Donnie D’Amato built a whole site around the thesis that “digital designers still expect to use the grid while experienced layout engineers have moved beyond it.” The idea isn’t that we should never literally use display: grid; but rather that strict adherence to an overall page grid isn’t necessary. Brad’s reaction was interesting, as someone in and out of a lot more projects than I am:

One of the most frequent, confusing conversations w/ designers is “No, the pink lines that overlay design comps aren’t all that helpful for how things actually work in the browser.”

[…] throw your transparent pink 12-column grids in the trash can.

Brad Frost, “Link post to gridless.desgn”

Donnie feels this is all in the spirit of responsive design, and I’m inclined to agree, except that browser technology has evolved quite a bit since the coining of responsive design and it might be time to call it something new. “Content-driven design” is one of Donnie’s headers and that’s a nice phrase.

This all resonated with Michelle as well:

CSS layout features like flexbox and Grid enable us to build more flexible layouts that prioritise content. We talk about intrinsic and extrinsic sizing in CSS — sizing based on both content and context. The promised container queries specification will put even more power in the hands of developers. But it feels to me like the design process is still stuck in the past.

Michelle Barker, “Is it Time to Ditch the Design Grid?”

When container queries are really here, overall page layouts are really going to be an endangered species. Donnie knows:

[…] you should truly consider all other options before using a [browser window size] breakpoint. Ask, is the component expected to always be related to the page size (headers, modals, etc.)? Then a breakpoint might be acceptable. However, components that are placed deep within the page should not be using breakpoints to inform their layout.

Direct Link to Article — Permalink

The post gridless.design appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

The New Change View Menu

Featured Imgs 23

We’ve been plucking away at some UI changes that will help slowly morph our existing Pen Editor into the editor we’re imagining for the future. That will be a big change, someday, but in order to make it feel less abrupt, we’re doing smaller changes where we can so that the final change won’t feel so big.

So anyway, a little update to the Change View menu. Featuring fun animated rotations!

The post The New Change View Menu appeared first on CodePen Blog.

Posted on

Save Pen Dropdown

Featured Imgs 23

Just a quick note on this Pen Editor UI/UX change. The Save button used to be only that. You click it, the Pen saves. It’s only other job is a little line on the top of it to let you know when the Pen has unsaved changes. We’ve updated it to have a little dropdown menu to give you easier access to a variety of other functions relevant to any Pen:

If you ask me, Format Code on Save is under-utilized (as it’s not a default), and it’s such a pleasure to use. I’m sure most of y’all have autoformatting going on in your local editor using something like Prettier, which is exactly what we use. Give it a try!

The post Save Pen Dropdown appeared first on CodePen Blog.

Posted on

Demystifying styled-components

Category Image 052

 Joshua Comeau digs into how styled-components works by re-building the basics. A fun and useful journey.

styled-components seems like the biggest player in the CSS-in-React market. Despite being in that world, I haven’t yet been fully compelled by it. I’m a big fan of the basics: scoped styles by way of unique class names. I also like that it works with hot module reloading as it all happens in JavaScript. But I get those through css-modules, and I like the file-separation and Sass support I get through css-modules. There are a few things I’m starting to come around on though (a little):

  • Even with css-modules, you still have to think of names. Even if it’s just like .root or whatever. With styled-components you attach the styles right to the component and don’t really name anything.
  • With css-modules, you’re applying the styles directly to an HTML element only. With styled-components you can apply the styles to custom components and it will slap the styles on by way of spreading props later.
  • Because the styles are literally in the JavaScript files, you get JavaScript stuff you can use—ternaries, prop access, fancy math, etc.

Direct Link to Article — Permalink

The post Demystifying styled-components appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

#324: How can we help you better?

Featured Imgs 23

Chris and Marie talk about customer support. If you’re a regular listener of this show, you’ll remember that we’ve had a lot of success with customer support over the last year, the point that our volume of direct support is rather low. That’ll happen when you fix every major problem that comes up. But it also means that we have some space to do better! It’s a big bummer when we have a customer leave when they never reach out at all to get a hand from us on whatever they might need. It leaves us thinking… what else can we do? Can we help you with anything? We’ve been trying a handful of things to get better data and answers to these kind of questions.

And that Call-To-Action: If we can do anything to help you, hit us up.

Time Jumps

  • 01:17 Support volume is low
  • 05:54 Having support available and improving error messages
  • 08:13 Support levels from Pro vs free members
  • 10:43 Sponsor: Automattic
  • 12:30 The perks of Pro support
  • 16:53 Evaluating support with a WordPress plugin
  • 20:24 Community supporting each other
  • 24:35 Contextual support

Sponsor: WooCommerce + MailPoet = Paid Newsletter Subscriptions!

WooCommerce is the premier eCommerce plugin for WordPress. MailPoet brings a fancy email builder right into WordPress. Combine the two and you get more than power of them individually. For one thing, you get extra powerful eCommerce email abilities — things like abandoned cart emails. Better, you can combine them to make a paid subscription newsletter, but powered by your own site!

The post #324: How can we help you better? appeared first on CodePen Blog.

Posted on

postcss-px-to-viewport

Category Image 091

A user wrote in the other day asking us to add this PostCSS plugin: postcss-px-to-viewport. We’re always happy to consider them as needed, and this one looks pretty neat and pretty popular.

It also blows my mind a little bit. All you do is size things in traditional units like px and it turns them into viewport units instead, making the entire UI scale together. You could just use viewport units yourself, but I guess this means you get to keep using units you have more muscle memory and a mental model for, yet get this result.

Above is me in Debug Mode checking out the weird result!

One reason I bring it up is to note the special way that options are passed to the PostCSS plugin:

@use postcss-px-to-viewport(
  viewportUnit: vw,
  viewportWidth: 1200
);

That’s just passing two of the many options this plugin supports. Any PostCSS plugin we offer that supports options works in this same format. For example, if you want to customize Autoprefixer, you can do that the same way.

The post postcss-px-to-viewport appeared first on CodePen Blog.

Posted on

Zero-Width Space

Category Image 091

The name zero-width space is antithetical, but it’s not without uses. In text, maybe you’d use it around slashes because you want to be sure the words are treated individually but not have any physical space around the slash:

That’s an image. WordPress was being weird about it and not escaping it even when in a code block.

That’s pretty theoretical though—I’ve never once needed to do that. It might be useful in a long word to suggest that it can be broken there… but that’s also rare as we have the soft-hyphen (&shy;) which is designed for that and leaves a typically appropriate hyphen at the break.

What I have needed to do is exactly the opposite: trick a system into thinking a single word is two words. Like on Twitter, if I @username or #hashtag in the text of a tweet, those will be linked up respectively. But I don’t always want that. On CSS Twitter, I might want to refer to a @media query or show an #id-selector. Toss a zero-width space between the symbols and the text and I’m all set.

Get a zero-width space on your clipboard

Here’s a Pen I created ages ago that will help you do that:

There is also a quick trick for doing it from the browser console:

copy('u{200B}')

via:

And for yet another way that may appeal to you, a bookmarklet!

Copy & Paste concern

The danger with the zero-width space is, well, you can’t see it. If someone were to, for example, copy your @media query using the zero-width space trick from a tweet, it won’t work in their code editor (because it will invalidate the rule) and it might be extremely confusing. For that reason, it’s probably good to avoid using it in anything that might be copied as a code example, but probably fine when explicitly trying to not autolink something.

The post Zero-Width Space appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

CSS for Web Vitals

Category Image 052

The marketing for Core Web Vitals (CWV) has been a massive success. I guess that’s what happens when the world’s dominant search engine tells people that something’s going to be an SEO factor. Ya know what language can play a huge role in those CWV scores? I’ll wait five minutes for you to think of it. Just kidding, it’s CSS.

Katie Hempenius and Una Kravets:

The way you write your styles and build layouts can have a major impact on Core Web Vitals. This is particularly true for Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP).

For example…

  • Absolutely positioning things takes them out of flow and prevents layout shifting (but please don’t read that as we should absolute position everything).
  • Don’t load images you don’t have to (e.g. use a CSS gradient instead), which lends a bit of credibility to this.
  • Perfect font fallbacks definitely help layout shifting.

There are a bunch more practical ideas in the article and they’re all good ideas (because good performance is good for lots of reasons), even if the SEO angle isn’t compelling to you.

Direct Link to Article — Permalink

The post CSS for Web Vitals appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?

Category Image 091

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 to it as we go.

HTML-wise, I’m thinking image, text, image, text, etc.

<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>

<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>

<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>

If that was our entire body in an HTML document, the answer to the question in the blog post title is literally two lines of CSS:

body {
  display: grid;
  grid-template-columns: min-content 1fr;
}

It’s going to look something like this…

Not pretty but we got the job done very quickly.

So cool. Thanks CSS. But let’s clean it up. Let’s make sure there is a gap, set the default type, and reign in the layout. 

body {
  display: grid;
  padding: 2rem;
  grid-template-columns: 300px 1fr;
  gap: 1rem;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  font: 500 100%/1.5 system-ui;
}
img {
  max-width: 100%;
  height: auto;
}

I mean… ship it, right? Close, but maybe we can just add a quick mobile style.

@media (max-width: 650px) {
  body {
    display: block;
    font-size: 80%;
  }
  p {
    position: relative;
    margin: -3rem 0 2rem 1rem;
    padding: 1rem;
    background: rgba(white, 0.8);
  }
}

OK, NOW ship it!

The post How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

What does `font: 110%/1.4 system-ui` mean?

Category Image 052

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;
}

Someone wrote in confused by it, and I could see how a line like that is a bit bewildering at first.

The first thing to know is that it is called shorthand. The font property in CSS gives you the opportunity to set a bunch of font-* properties all at once. In this case, we’re setting:

html {
  font-family: system-ui;
  font-size: 110%;
  line-height: 1.4;
}

There are a few more little specific things to know. For example, the order matters.

/* invalid */
html {
  font: system-ui 100%/1.4;
}

You also can’t set the line-height without also setting the font-size. If you’re going to set line-height, you have to set both. Be extra careful there because something like 20px is both a valid line-height and font-size, and if you only set one, it’ll be the font-size. If you go for a unitless number, which is a great idea for line-height, and try to set it alone, it’ll just fail.

/* invalid */
html {
  font: 1.5 system-ui;
}

Of course, we’ve got all this detailed in the Almanac entry for font. But I’ll also give a shout to Mateusz Hadryś who has a detailed article titled “Full Text Styling With a Single Line of CSS” with some detailed figures like this that are helpful in understanding everything:

Showing the font property declaration. Style, variant and weight are in yellow with a label above that says order doesn't matter and a label beneath saying these have to be first. Next is size with a forward slash then line-height in red. Above them is a label that says these have to be next to each other. Next is family in light blue with a label that says it has to be last. There is an additional white label that connects size and family that says they are required.

Lastly, if system-ui was part of the confusion there, that’s one of those System Things.

The post What does `font: 110%/1.4 system-ui` mean? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

New Embed Modal

Featured Imgs 23

If you’ve used Embedded Pens before, you might notice the UI for helping you get the code from them has been updated:

All the same functionality there, it’s just everything works better. I’m a particular fan of how clear the choice is now on which tabs to display by default (that was a bit wonky before, sorry!). Plus, as you resize the height now, you’ll get a height readout in case you’re aiming for a very particular value. We’ll also remember all of your settings, so for example, if you always tend to select the same theme, that’ll be pre-selected when you open it back up.

Always feels good for us to bring areas of the site like this in-line with our latest-and-greatest design patterns, not only ensuring it looks and works good now, but will continue to take advantage of our pattern work.

The post New Embed Modal appeared first on CodePen Blog.