SVG can be used as an icon system to replace icon fonts. The reasons why SVG makes for a superior icon system are numerous, but we won’t be going over them in this article. via Pocket

My colleague, Matt King, encounters a lot of friction when using web UIs. Matt uses a screen reader to access the web. A screen reader expresses through speech and sound the text and controls of an interface. He and I work together on the accessibility team at Facebook. Whenever we are collaborating together, we inevitably find little gotchas. Over a few sessions, Matt mentioned that the string of text “Show more reactions” was being smushed together and read as “Showmorereactions”. 

The city and town name generator uses a database of over five million names across more than 100 countries. If you are looking for a random city or town name to spark a location for a book, game, or a script, millions of possibilities are at your finger tips. How you use the city or town name is up to you. All results may be freely used in any work.

Explore the deepest secrets of the ocean with some of Firefox Developer Edition 44’s newest tools, designed to take the pain out of CSS animation.

squeezr is most effective on sites with big images and heavy use of CSS3 media queries, which is typical for responsive or mobile web designs. However, in most cases at least some small savings can be achieved through image recompression and CSS minification. If the savings calculated by the test pilot aren't that huge, it's either because there's not much to save about your site (e.g. images are too small for downscaling and you don't use media queries), or because you just did a pretty good job already! ;)

SassDoc is to Sass what JSDoc is to JavaScript: a documentation system to build pretty and powerful docs in the blink of an eye.

Three years ago, my colleagues and I in O’Reilly Media’s Production department made the decision to rearchitect our print-publishing software toolchain to support typesetting print books in HTML and CSS. Doing print layout with web technology was a fairly radical notion at the time (and still is today!), especially in traditional publishing-industry circles where commercial desktop-publishing software continues to hold sway. But we were convinced that aligning our publishing tech with the web stack would pay dividends. Short-term, we knew it would enable us to simultaneously produce print and digital media more efficiently. And long-term, we felt that placing our bets on HTML+CSS was the best way to future-proof our workflows as electronic publishing, both online and offline, continued to evolve.
Transitioning to HTML as our canonical content source format immediately allowed us to realize many benefits, including Web-based authoring and a digital-first approach to next-gen ebook development. Building print templates in CSS also proved to be surprisingly straightforward, once we got up to speed on Paged Media, and the particular dialect of it spoken by our PDF formatter software.

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.

Despite web pages reaching 2MB performance remains a hot topic. The slicker your application, the better the user experience and the higher the conversion rate!

A guide to writing style sheets for large scale, rapidly changing, long-lived web projects

Right now, I have a near frictionless CSS workflow. I write in Sass, compile with Libsass and get vendor prefixes added with PostCSS/Autoprefixer via Gulp/Grunt. Why would I want to upset that?

CSS3 Text provides the ability to apply hyphenation to text, via the hyphens property. While this is all well and good, it doesn’t provide the fine grain control you may require to get professional results. For this, let me introduce to you CSS4 Text.

Keeping the web silky smooth

It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.

Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts, keeping track of them as their numbers increase can be hard — and once they start to spread across CSS files, forget about it! Because z-index can make or break a UI element’s visibility and usability, keeping your website’s UI in working order can be a delicate balance.

This polyfill makes it possible to use attr() like it is defined in the spec.

I’ve been experimenting lately with a new way to apply color values in my CSS. Instead of setting explicit values for each color, I calculate the entire palette from a small set of base colors. It’s not an applicable solution for every project, but it might be an interesting alternative method to consider.

Animating elements in your mobile applications is easy. Animating elements in your mobile applications properly may be easy, too… if you follow our tips here.

The practical guide to why laying out type never quite does what you want