Tag Archives: CSS

CSS Custom Properties and Theming

Update css variable values using JavaScript and update all stylesheet rules that reference that variable

 

Chris Coyier writes:

We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things preprocessor variables can do that native variables cannot, but for the most part, native variables can do the same things. But, they are more powerful because of how they are live-interpolated. Should their values ever change (e.g. JavaScript, media query hits, etc) the change triggers immediate change on the site.

Cool, right? But still, how actually useful is that? What are the major use cases? I think we’re still seeing those shake out.

Read more from the source: CSS-Tricks

CSS Animations vs the Web Animations API: A Case Study

Controlling CSS keyframes, transitions and animations from JavaScript: pretty intuitive

 

Last week, I wrote about how I created the bitsofcode logo animation with CSS. After that, it was suggested that I attempt a comparison between a CSS animation and the Web Animations API, so here it is! Introduction to the Web Animations API As with last week, I’ll start this

Read more from the source: bitsofcode

Getting to know CSS Grid Layout

CSS Grids may reduce your need for media queries

 

CSS Grid is the most critical layout feature to come to browsers since Flexbox. It allows us to escape some of the magic numbers, hacks, and workarounds that we’ve grown accustomed to using for the last 15 years. It brings simplicity to declaring layouts that will tear a chunk out of most of the major CSS frameworks, and reduce bloat in our own hand crafted styles.

If you’re not familiar with what CSS Grid is, and you’ve made it this far, it’s a layout tool that applies to a containing element which then manages how the child elements are spaced, sized, and aligned.

CSS Grid gives us powerful new abilities — most notably for layout to be aware of both horizontal and vertical space at the same time, for changes to layout not to impact markup, and the ability adapt to available space without the need for media queries.

Read more from the source: Campaign Monitor Engineering

Replacing the Jet Engine While Still Flying

Firefox is taking a one-piece-at-a-time strategy to replace the Gecko rendering engine with a modern one coded in Rust.

 

Mozilla’s been working on a brand new, top-secret engine. Except it’s totally not top-secret. Never was. At another company it would have been a top-secret project. At Mozilla, it’s all done out in the open.

The project is called Servo. It was started as an experiment. It’s coded in a new programming language called Rust. (Gecko is written in C++.) And it’s open source. You can totally help us make it.

Read more from the source: jensimmons.com