Skip to main content
Fresh Article

What does “revert” do in CSS?

Miriam Suzanne has a Mozilla Developer video on the subject. The revert value is fairly new, supported in Firefox and Safari, but not yet in Chrome-world. We've already got a couple of related keywords that work on any property which are meant to help control inheritance and reset values.

The difference is small, but important: unset allows inheritance, while initial does not.

Miriam makes the case that revert is actually the most useful of them because it "takes user and user-agent … Read article

Link

Woodworking SVG (and Other Real Life Encounters)

Article

Going Beyond Automatic SVG Compression With the “use” Element

If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those tools takes only few seconds and reduces your file size a lot. But if you need to use your SVG inline to animate or interact with the code, there’s still a lot you can do about code legibility.

Reusing content with SVG’s <use> is not always an option, but when … Read article

Link

Simple Image Placeholders with SVG

Link

“Browser Functions”

Article

Flexible Captioned Slanted Images

The end result of Eric Meyer's tutorial on creating this row of slanted images is pretty classy. But it's more about the journey than the destination (there isn't even really an isolated demo for it). Eric does an amazing job at talking it through like a thought process.

We did that recently, only ours was sort of fake/generic where Eric's was for a real-world design. … Read article

Link

Playwright

Link

Bundling JavaScript for Performance: Best Practices

Article

What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?

Some HTML elements accept width and height as attributes. Some do not. Those attributes are sometimes referred to as presentational attributes. The thing to know about them is that they are overridden by any other styling information whatsoever. That makes them ideal as a fallback.
Link

Min and Max Width/Height in CSS

Article

Building Multi-Directional Layouts

There are some new features in CSS that can assist us with building layouts for different directions and languages with ease. This article is about CSS logical properties and values (e.g. margin-inline-start).  These are a W3C working draft that still going under heavy editing, but have shipped in many browsers. I want to talk about this because I’ve been using these properties for a little while and have seen a significant boost to my workflow after switching to them.… Read article

Keep browsing in the archives

Monthly Mixup

Article

The Secret Weapon to Learning CSS

Article

Planning a Tech Event in 6 Months

Article

Slow Websites

Snippet

CSS Grid Starter Layouts

Monthly Sponsor
Thanks, CloudBees!