CSS Rooster

A Bot that Writes CSS Classes for HTML with Deep Learning

I played with it for a bit to see if I could get it to do anything impressively analytic. I took some semantic HTML and removed all the class names from it with the RegEx class="[a-zA-Z0-9:;.s()-,]*". I dropped the class-free HTML into the Rooster, and it did generate new classes:

But the new classes seemed entirely based on what the tag is. <ul class="list">, <a class="link"> and …


CSS Rooster is a post from CSS-Tricks

An Introduction to the Reduced Motion Media Query

The open web’s success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript.

Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.

A brief history of Reduced Motion

When it was released in …


An Introduction to the Reduced Motion Media Query is a post from CSS-Tricks

Maintaining Accessibility in a Responsive World

There a bit of a CSS trick is Scott Jehl’s latest article. Perhaps you’ve used an “accessible hiding” technique? That’s where you are deliberately avoiding display: none; because you want the element to be focusable, but not seen visually.

But… that can be awkward for anyone who uses the keyboard to navigate the site and also looks at the screen.

To avoid this, we try to remember that any accessibly-hidden content should be visible when it gains focus. For example, …


Maintaining Accessibility in a Responsive World is a post from CSS-Tricks

Preparing and Exporting SVG Icons in Sketch

There is an interesting gotcha about the fill-rule attribute of SVG, detailed here by Anthony Collurafici.

Fill-Rule is an SVG property that basically defines how to determine what shapes are filled or subtracted from the shape. The default SVG value is “nonzero”, and this is what Android requires. Unfortunately, Sketch uses “evenodd”. Luckily Sketch provides all the features we need to convert our shapes from “evenodd” to “nonzero”. And its now even easier in Sketch 42.

The direction you draw …


Preparing and Exporting SVG Icons in Sketch is a post from CSS-Tricks

JavaScript Start-Up Performance

Addy Osmani:

Smaller JavaScript bundles generally do result in a faster load time (regardless of our browser, device & network connection) but 200KB of our JS !== 200KB of someone else’s and can have wildly different parse and compile numbers.

Using file size as a metric isn’t an awful crime, because it does matter, but it’s only part of the JavaScript performance story.

I also found the overview of the discussion of bytecode interesting. Browsers download JavaScript, parse it, turn …


JavaScript Start-Up Performance is a post from CSS-Tricks

How to Create a Donate Form for Nonprofit Organization using WordPress

Do you want to be able to accept donations on your nonprofit website? WordPress makes it easy for nonprofits to create a donation form and accept donations from their website. In this step by step guide, we’ll show you how to setup your own custom… Read More »

The post How to Create a Donate Form for Nonprofit Organization using WordPress appeared first on WPBeginner.