This article “Shadow DOM” by Steven Wittens is only vaguely about the Shadow DOM. It’s mostly about how awful everything is. HTML sucks, CSS sucks, the DOM sucks, SVG sucks, MathML sucks… I don’t want to pick on Steven. He is, without a doubt, many (many) times smarter than I am and has well articulated points. Let’s go wider.

I see this regularly from people who have been at this a long time and are very smart. They develop a …

Hatin’ on Web Tech is a post from CSS-Tricks

Continue reading →

The following is a guest post by Ian Marquette. Ian learned that SVG can have a <text> element, meaning that text could come from a dynamic source while still being able to do cool custom SVG-specific stuff to it.

I was recently working on a WordPress-based website that needed an infographic. Being a proponent of responsive design, I drew the infographic in Illustrator and exported it to SVG for scalability. While tinkering around in the backend I discovered that …

SVG & WordPress Custom Fields is a post from CSS-Tricks

Continue reading →

Throughout the life of this site, I’ve flipflopped (nope, yep) on whether or not I show social sharing buttons on articles. As anything, there are arguments in either direction. We can cover that briefly, but I also want to gather a bit of data on the subject, so that will be our next poll.

The impetus for this poll is the comments I get from people during times where there are no sharing buttons present on my …

New Poll: Sharing Buttons is a post from CSS-Tricks

Continue reading →

About 22,000 CSS-Tricks visitors voted in the last poll about command line usage, which asked:

On average, how many commands do you run from the command line each work day?

The result: there is a lot of people at all the different levels. It’s no wonder it can be such a hot topic.

Here’s the results as a chart:

See the Pen uJjyD by Chris Coyier (@chriscoyier) on CodePen.

19% of people never use the command line …

Poll Results: Command Line Usage is a post from CSS-Tricks

Continue reading →

I redesigned this site a smidge. It’s not a huge re-thinking or as big of an undertaking as v10 was, but it’s different enough I’m going to call it v11.

Some of it looks like this:

Less

Gone is the Downloads section (also has been called “Demos”). While that got a good amount of traffic, I never kept it up and the demos were getting long in the tooth. I live in a world of demos and that place is …

Design v11 is a post from CSS-Tricks

Continue reading →

The following is a guest post by Bryan Jones, the creator of CodeKit. I’ve been using CodeKit for a couple of years now and I’ve talked about it plenty. In my opinion it changed the game in front end development making it easy to use advanced tools that, while powerful, felt out of reach for many. Now CodeKit 2.0 it out, which has followed the landscape of front end development, bringing us more powerful tools that are tough to …

On CodeKit 2.0 is a post from CSS-Tricks

Continue reading →

I’ve been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you’re good with IE 9+, using inline SVG and the <use> element to reference an icon is a superior system.

First let’s cover how it works.

A nice way to handle your icons is to have a folder full of .svg files. …

That’s one of the cool things about working

Icon System with SVG Sprites is a post from CSS-Tricks

Continue reading →

The following is a guest post by Agop Shirinian. Agop ran into an interesting scenario where he needed an element to be scrollable in one direction, while allowing the overflow in the other direction. You’d think that’s what overflow-x and overflow-y are for, but it’s not that simple. I’ll let Agop explain.

So you’re tasked with creating a scrollable menu with submenus that pop out when you hover over a parent menu item.

Simple!

Create a list for the …

Popping Out of Hidden Overflow is a post from CSS-Tricks

Continue reading →

Chris Albrecht posted a question on StackOverflow about grids. Essentially: imagine you have an element with an unknown number of children. Each of those children is some percentage of the width of parent such that they make equal rows, like 25% wide each for four columns, 33.33% wide each for three columns, etc. The goal is to fill the space of this “grid” evenly. There are an unknown number of children, so let’s say you were going with 25% and …

Filling the Space in the Last Row with Flexbox is a post from CSS-Tricks

Continue reading →

Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general.

But I’ve been enjoying tinkering with flexbox, so I decided to toss it together with that, and it made for a pretty educational example I think.

Here it is:

See the Pen Bar Navigation with Flexbox and SVG icons…

Flexbox Bar Navigation Demo is a post from CSS-Tricks

Continue reading →