Menu

CSS

Teaching CSS

November 18th, 2019

I’ve been using CSS as a web developer since CSS became something we could actually use. My first websites were built using <font> tags and <table>s for layout. I remember arguments about whether this whole CSS thing was a good idea at all. I was quickly convinced, mostly due to the ability to easily change…

The Best Cocktail in Town

November 18th, 2019

I admit I’ve held in a lot of pent-up frustration about the direction web development has taken the past few years. There is the complexity. It requires a steep learning curve. It focuses more on more configuration than it does development. That’s not exactly great news for folks like me who consider themselves to be…

Finally, it Will Be Easy to Change the Color of List Bullets

November 14th, 2019

In my germinating years, the general advice was this: <ul> <li><span>List item</span></li> <!– … –> </ul> li { color: red; } /* bullet */ li span (color: black; } /* text */ Not terrible, but not great. You’re “resetting” everything at the span level, so it gets more complicated the more you do. Things are…

Oh Hey, Padding Percentage is Based on the Parent Element’s Width

November 13th, 2019

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the element itself. So if an element is 1,000 pixels wide with padding-top: 50%, that padding is 500 pixels. It’s weird having top padding based on width, but that’s how…

Thoughts After Looking at the Web Almanac’s Chapter on CSS

November 13th, 2019

Woah, I didn’t see this coming! The HTTP Archive dropped this big “state of the web” report called Web Almanac with guest writers exploring data from 5.8 million websites. Una Kravetz and Adam Argyle wrote the CSS chapter. The point is to squeeze a digestible amount of insight out of a mountain’s worth of data….

A Super Weird CSS Bug That Affects Text Selection

November 11th, 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. 😳😬😕   In other words, if you…

Pac-Man… in CSS!

November 11th, 2019

You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property. See the Pen Animated Pac-Man by Maks Akymenko (@maximakymenko) on CodePen. Are you excited?…

Two-Value Display Syntax (and Sometimes Three)

November 8th, 2019

You know the single-value syntax: .thing { display: block; }. The value “block” being a single value. There are lots of single values for display. For example, inline-flex, which is like flex in that it becomse a flex container, but behaves like an inline-level element rather than a block-level element. Somewhat intuitive, but much better…

Diana Smith’s Pure CSS Artwork “Lace”

November 8th, 2019

Diana is at it again with her absolutely unbelievable CSS paintings. This latest one is called Lace. Past paintings are Francine, Vignes, and Zigario. She wrote for us last year if you’d like a little insight into her thinking. Andy Baio looked at the painting in a variety of older and incompatible browsers, and the…

Some Things You Oughta Know When Working with Viewport Units

November 6th, 2019

David Chanin has a quickie article summarizing a problem with setting an element’s height to 100vh in mobile browsers and then also positioning something on the bottom of that. Summarized in this graphic: The trouble is that Chrome isn’t taking the address bar (browser chrome) into account when it’s revealed which cuts off the element…