Share This
Get in Touch
Scroll Down
//Blog

Solved With :has(): Vertical Spacing in Long-Form Text

If you’ve ever worked on sites with lots of long-form text — especially CMS sites where people can enter screeds of text in a WYSIWYG editor — you’ve likely had to write CSS to manage the vertical spacing between different typographic elements, like headings, paragraphs, lists and so on. It’s surprisingly tricky to get this right. And it’s one reason why things like the Tailwind Typography plugin and Stack Overflow’s Prose exist — although these handle much..

Read more
  • 0 Comment

6 Common SVG Fails (and How to Fix Them)

Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. And because of that, we have the ability to scope things out and uncover any potential issues or opportunities to optimize the SVG. But sometimes, we can’t even see our SVGs at all. In those cases, there are six specific things that I look for when I’m debugging. 1. The viewBox values The viewBox is a common point..

Read more
  • 0 Comment

:has is an unforgiving selector

A little thing happened on the way to publishing the CSS :has() selector to the ol’ Almanac. I had originally described :has() as a “forgiving” selector, the idea being that anything in its argument is evaluated, even if one or more of the items is invalid. /* Example: Do not use! */ article:has(h2, ul, ::-scoobydoo) { } See ::scoobydoo in there? That’s totally invalid. A forgiving selector list ignores that bogus selector and proceeds to evaluate the rest of th..

Read more
  • 0 Comment

Faking Min Width on a Table Column

The good ol’ <table> tag is the most semantic HTML for showing tabular data. But I find it very hard to control how the table is presented, particularly column widths in a dynamic environment where you might not know how much content is going into each table cell. In some cases, one column is super wide while others are scrunched up. Other times, we get equal widths, but at the expense of a column that contains more content and needs more space. But I found a CSS t..

Read more
  • 0 Comment

Styling Buttons in WordPress Block Themes

A little while back, Ganesh Dahal penned a post here on CSS-Tricks responding to a tweet that asked about adding CSS box shadows on WordPress blocks and elements. There’s a lot of great stuff in there that leverages new features that shipped in WordPress 6.1 that provide controls for applying shadows to things directly in the Block Editor and Site Editor UI. Ganesh touched briefly on button elements in that post. I want to pick that up and go deeper into approaches for s..

Read more
  • 0 Comment

Thank You (2022 Edition)

You know, this is the time of year where Chris normally publishes a big ol’ reflection of the past year. The first one was published in 2007, the same year CSS-Tricks began, and it continued all the way through 2021 without missing a beat. Having been a CSS-Tricks reader myself all those years, I’d hate to see that change. So, here we are! 2022 was sure a heckuva year as far as transition goes. At this time last year, we were looking ahead at some goals for the upcomin..

Read more
  • 0 Comment

2022 Roundup of Web Research

We’ve started making a tradition of rounding up the latest front-end research at the end of each year. We did it in 2020 and again in 2021. Reports are released throughout the year by a bunch of different companies and organizations researching everything from web design trends to developer skills to popular coding languages and so many other things. Last year, it seemed the overarching trend was around remote work and its impact on developer productivity and workplace e..

Read more
  • 0 Comment

Help choose the syntax for CSS Nesting

CSS Nesting is making the rounds yet again. Remember earlier this year when Adam and Mia put three syntax options up for a vote? Those results were tallied and it wasn’t even even close. Now there’s another chance to speak into the future of nesting, this time over at the WebKit blog. The results from the Adam and Mia’s survey sparked further discussion and two more ideas were added to the mix. This new survey lets you choose from all five options. Jen Simmons has..

Read more
  • 0 Comment

WordPress Playground: Running WordPress in the Browser

Being able to quickly spin up a WordPress instance has been the strength of WordPress ever since its famous “five-minute install”. Upload a few files, configure a few settings, and you’re off. The friction of uploading files has gotten a lot easier, thanks to plenty of “one-click” install options many hosts offer (including DigitalOcean and Cloudways). Some companies have tried to abstract the process even more, using the multi-site features of WordPress t..

Read more
  • 0 Comment

CSS Infinite 3D Sliders

In this series, we’ve been making image sliders with nothing but HTML and CSS. The idea is that we can use the same markup but different CSS to get wildly different results, no matter how many images we toss in. We started with a circular slider that rotates infinitely, sort of like a fidget spinner that holds images. Then we made one that flips through a stack of photos. This time around, we’re diving into the third dimension. It’s going to look tough at first, but ..

Read more
  • 0 Comment
Get in Touch
Close