Saved (Public Feed)

The community-driven resource library of CSS Houdini worklets. Learn about CSS Houdini, its APIs, usage, polyfills, and browser status, to take advantage of the Houdini APIs today. “Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.” —MDN

If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1]. This tool helps you do exactly that.

Underlines are hard. Complications quickly arise if you want to do anything fancier than the good ol’ CSS text-decoration: underline. There are a lot of different techniques. Unfortunately, they nearly always come with significant drawbacks.

Including some centering techniques, `li::marker`, and `display: inline-flex`, `column-rule`, `background-repeat: round`. There are a lot of CSS properties that some don’t know about, or they know about them, but forget to use them when they’re needed.

Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.

We have covered print stylesheets in the past here on Smashing Magazine. In this article, Rachel Andrew takes a look at the state of printing from the browser today.

How to make a short block of text center-aligned but left-aligned when it's longer. Use `text-align: center` on the container and `display: inline-block` on the text container.

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.

Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New"

‘There are some particular findings that are pivotal to issues such as readership and readability and comprehension, which is really what body copy is all about. If people won’t read it, or if they can’t read it or understand it, then what’s the point of having it?’

‘This is a simple trick to overlay a grid or a mock-up over a page you're styling. It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text.’

DesignBombs is an online publication that aims to provide well-researched guides, in-depth tutorials, exclusive deals, and other useful content.

Change the tap highlight color in WebKit Mobile-using devices (many of them).

Deep inspection of hasLayout, the cause of most 'IE bugs'. Last updated 2008.

“Lifted corners, Curled corners, Perspective, Raised box, Single vertical curve, Vertical curves, Single horizontal curve, Horizontal curves, Rotated box”

"Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies."

How to make an background image scale without using a ton of JavaScript.

Using CSS to detect device size (for things like iPads and iPhones).

This may be worth looking into. I waffle on whether this sort of thing is ultimately a good decision — you're relying on someone else's framework, it takes a while to learn and master, and once you decide to go with it you're essentially stuck with it. But isn't that the case with any pseudo-framework developed for a website design? I should test this on a little project.

As seen on Normative.com.

Intelligently choosing the graceful degradation (size- and style-wise) of your web fonts.

With handy charts.

"A tool for visual layout development of YAML based CSS layouts." YAML stands for Yet Another Multicolumn Layout.

"Striped background generator."

Detailed to the point of being almost unreadable!

Ugly "Browse..." buttons be gone!

Using one large image with all of your smaller images inside of it, and using CSS to position the background into the right position.

How to hide unsightly outlines.