CSS WordPress

Evolution of img: Gif without the GIF

Colin Bendell writes about a new and particularly weird addition to Safari Technology Preview in this excellent post about the evolution of animated images on the web. He explains how we can now add an MP4 file directly to the source of an img tag. That would look something like this: <img src="video.mp4"/> The idea is that that code would render an image with a looping video inside. As Colin describes, this provides a host of performance benefits:Animated GIFs are [...]

A Big List of Typography Books

For your holiday gift shopping needs! These my picks for some of the most popular books out there on typography, with a tilt toward web typography. Plus a couple of bonus picks by our own Robin Rendle. Direct Link to Article — PermalinkA Big List of Typography Books is a post from CSS-Tricks CSS-Tricks

Editing the W3C HTML5 spec

Bruce Lawson has been tapped to co-edit the W3C HTML5 spec and, in his announcement post, clarified the difference between that and the WHATWG spec:The WHATWG spec is a future-facing document; lots of ideas are incubated there. The W3C spec is a snapshot of what works interoperably – authors who don’t care much about what may or may not be round the corner, but who need solid advice on what works now may find this spec easier to use.I [...]

Simple Patterns for Separation (Better Than Color Alone)

Color is pretty good for separating things. That’s what your basic pie chart is, isn’t it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination.Patrick Dillon tackled the Pie Chart thing Enhancing Charts With SVG Patterns:When one of the slices is filled with something more than color, it’s easier to figure out [who the Independents are]:See the [...]

Discover The Fatwigoo

When you use a bit of inline <svg> and you don’t set height and width, but you do set a viewBox, that’s a fitwigoo. I love the name. The problem with fatwigoo’s is that the <svg> will size itself like a block-level element, rendering enormously until the CSS comes in and (likely) has sizing rules to size it into place. It’s one of those things where if you develop with pretty fast internet, you might not ever see it. But [...]

So you need to parse an email?

Say you have a website with users who have accounts. Those users email you sometimes. What if you could parse that email for more context about that user, their account, and what they might want?There are email parsing services out there. For example, Zapier offers Parser, which is free, with the idea being that you use Zapier itself to interconnect that data with other apps. You teach it about your emails and then get programatic access to those data [...]

A free guide to head elements

Josh Buchea rounds up all the stuff that could be put into the <head> for various reasons. Fun fact I just learned, the only acceptable elements in the head are <link>, <script>, <meta>, <title>, and <noscript> (I think that’s the complete list). If you put anything else in there at all, all browsers will abruptly end the <head> and start the <body>.Also, this proliferation of stuff-in-the-head is at least in part why manifest.json is a thing. Direct Link to [...]

Hexatope

It was awesome to hear Charlotte Dann on CodePen Radio the other day, who is Kickstarting a new jewelry business. The idea is that you draw your own jewelry (everything you draw looks awesome because it’s on this interesting hexagon grid) and then it gets actually made. This tying together of her passions sprang to life on CodePen. Direct Link to Article — PermalinkHexatope is a post from CSS-Tricks CSS-Tricks

A Bit on Buttons

1 The other day we published an article with a bonafide CSS trick where an element with a double border could look like a pause icon, and morph nicely into a CSS triangle looking like a play icon. It was originally published with a <div> being the demo element, which was a total accessibility flub on our part, as something intended to be interacted with like this is really a <button>. It also included a demo using the checkbox hack to [...]

Gutenberg

I’ve only just been catching up with the news about Gutenberg, the name for a revamp of the WordPress editor. You can use it right now, as it’s being built as a plugin first, with the idea that eventually it goes into core. The repo has better information. It seems to me this is the most major change to the WordPress editor in WordPress history. It also seems particularly relevant here as we were just talking about content blocks [...]