Yearly Archives: 2019

(This is a sponsored post.)

Within the arsenal of every WordPress developer exists a toolbox of plugins used to implement key features on a website. Forms, up until now, have been a point of contention for most developers, given that no form plugins have offered seamless integration with existing website code. Therefore, forms often become an alien chunk of code requiring custom and time-consuming stylization.

Now there’s a solution: WS Form

WS Form is a developer-focused WordPress form plugin, … Read article

The post Building Responsive WordPress Forms appeared first on CSS-Tricks.

The ninth edition of the ECMAScript standard, officially known as ECMAScript 2018 (or ES2018 for short), was released in June 2018. Starting with ES2016, new versions of ECMAScript specifications are released yearly rather than every several years and add fewer features than major editions used to. The newest edition of the standard continues the yearly release cycle by adding four new RegExp features, rest/spread properties, asynchronous iteration, and Promise.prototype.finally. Additionally, ES2018 drops the syntax restriction of escape sequences from … Read article

The post New ES2018 Features Every JavaScript Developer Should Know appeared first on CSS-Tricks.

A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not.

The trick is custom properties that control the movement:

body { --toggle: 0; --playState: "paused";
}

Which are used within animations and transitions:

.animation { animation: bobble 2s infinite; animation-play-state: var(--playState);
}
.transition { transition: transform calc(var(--toggle) * .15s) ease-in-out;
}

And toggle-able by JavaScript:

// stop animation
document.body.style.setProperty("--toggle", "0");
document.body.style.setProperty("--playState", "paused");
// play animation

… Read article

The post Toggling Animations On and Off appeared first on CSS-Tricks.

This confused me for a bit here so I’m writing it out while it’s fresh in mind. Just because you’re using a web component doesn’t mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of your website. Like this:

See the Pen Web Component with Global Styles (because no Shadow DOM) by Chris Coyier (@chriscoyier) on CodePen.

That <whats-up> element isolated the … Read article

The post Styling a Web Component appeared first on CSS-Tricks.

Outside of my extreme envy of the SEO they are going to get out of this, Rachel is spot on here. Learning CSS has some pillars, like language syntax, selectors, layout, and flow that, once learned, unlock your CSS merit badge.

What I would add is that if you really want to learn CSS, give yourself a project that has real-world stakes (like a personal website), so what you are doing with CSS feels important and gives you the incentive … Read article

The post How To Learn CSS appeared first on CSS-Tricks.