CSS WordPress

A Collection of Interesting Facts about CSS Grid Layout

A few weeks ago I held a CSS Grid Layout workshop. Since I’m, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you.Have fun! Negative values lower than -1 may be used for grid-row-end and grid-column-end In a lot of code examples and tutorials you will see that you can use grid-column-start: 1 and grid-column-end: [...]

Did CSS get more complicated since the late nineties?

Hidde de Vries gathers some of the early thinking about CSS:There is quite a bit of information on the web about how CSS was designed. Keeping it simple was a core principle. It continued to be — from the early days and the first implementations in the late nineties until current developments now.The four main design principles listed are fascinating:Authors can specify as much or little as they want It is not a programming language by design They are agnostic as [...]

If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs?

Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of <svg> might have a <title>, and you might be appying IDs to both of those elements for various reasons.One of those reasons might be because you just want an ID on the icon to uniquely identify it for JavaScript or styling purposes. Another of those reasons is that for accessibility, it’s recommended you use aria-labelledby to connect the id and title, like: <!-- [...]

How To Rename a Font in CSS

Nothin’ like some good ol’ fashioned CSS trickery. Zach Leatherman documents how you can use @font-face blocks with local() sources to redefine a font-family. It can actually be a bit useful as well, by essentially being an abstraction for your font stack. @font-face { font-family: My San Francisco Alias; src: local(system-ui), local(-apple-system), local('.SFNSText-Regular'); } p { font-family: My San Francisco Alias, fantasy; } Direct Link to Article — PermalinkHow To Rename a Font in CSS [...]

Stickybits: an alternative to `position: sticky` polyfills

Stickybits is a small JavaScript utility plugin. It’s goal is not to get in the way. It does one thing well: help with sticky elements. It is not dependent on other JavaScript Plugins, can be imported via npm, and approaches sticky elements in a very utility-oriented way.Solving the sticky element problem can lead to sticky situations When navigating sites, it is common to see HTML elements, like banners and navigations, sticking to the top and bottom of the browser. [...]

The $1,000 Podcasting Setup

I figure between (as I write) the 267 episodes of ShopTalk, 134 episodes of CodePen Radio, 154 video screencasts (and many hundreds more as part of the different series), and all my guest podcast apperances, I’m edging on 1,000 things I’ve voice-recorded for public consumption. 98% of that was with the Rode Podcaster, the same exact microphone I documented using in 2008. I figured it was about time for an upgrade, as I plan to continue podcasting and screencasting [...]

CSS-Tricks Chronicle XXXI

All the latest happenings! As I like to do, I round up a bunch of things that have happened in the past few months around here on this site, over at CodePen and ShopTalk, and other sites where I got to be a guest or was involved somehow. There has been some big releases, some redesigns, and a bunch of guest podcasts.I got to be a guest on Relative Paths with Mark Phoenix and Ben Hutchings. It was episode [...]

A Little Example of Data Massaging

I’m not sure if “data massaging” is a real thing, but that’s how I think of what I’m about to describe. Dave and I were thinking about a bit of a redesign for ShopTalk Show. Fresh coat of paint kinda thing. Always nice to do that from time to time. But we wanted to start from the inside out this time. It didn’t sound very appealing to design around the data that we had. We wanted to work with [...]