• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

What’s Going on With CSS Houdini?

CSS · September 23, 2020

It has been years since CSS Houdini was revealed in 2016 and admittedly, it has been very slow going. Although, since the W3C task force was announced there have been a few things delivered.

If you’re not aware of CSS Houdini, it is a set of proposals and standards that allow access to lower-level aspects of the layout and CSS parser in web browser engines. It is basically an umbrella term used to describe a tonne of different API’s, some of which have already shipped and you might be familiar with.

As someone who has been developing since Internet Explorer 5.5, I still remember what the web used to be like. We once upon a time in IE6 didn’t have support for transparent PNG’s, custom web fonts required using solutions such as SIFR which relied on Flash and JS, rounded corners with CSS were also not possible, requiring the use of carefully cut out transparent GIF’s.

Since then, we have come a very long way. We can now do shadows, gradients, filter effects, custom fonts, rounded corners and advanced layouts all inside of CSS. It’s easy to forget how far we have come and to see where CSS is heading, CSS is not finished yet.

Layout and the containing block - CSS: Cascading Style Sheets | MDN

Surprisingly, Firefox has been dragging the chain on implementation of numerous Houdini features. Mozilla has marked the Layout API as worth prototyping, the same thing for the Paint API, Properties & Values API and finally Typed OM. As for Safari, they’ve gone a little further than Mozilla (which is really surprising).

Understandably, CSS Houdini is ambitious and it has a lot of moving parts. Browser vendors and standards participants are very particular about the ways in which these API’s are implemented and exposed. There are numerous ideas in the issues section on the GitHub repository.

The last big piece of the puzzle before CSS Houdini goes to the next level is the Parser API. When you read up on what this API can do, you’ll understand why it hasn’t been implemented in any browser yet, it’s still in proposal form at the moment.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • ChatGPT Stopping Part Way Through a Response? Here Is How You Fix It
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Mock uuid In Jest

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz