A very !important lesson

JS Party: JavaScript, CSS, Web Development

Estelle Weyl has been building the web since 1999 and documenting it since 2007. Today she joins Amal for a loooong and deeeep conversation about new and !important features of CSS & HTML. Sit down, strap in, and prepare to be schooled!

Leave us a comment

Changelog++ members save 5 minutes on this episode because they made the ads disappear. Join today!

Sponsors:

• Raygun – Never miss another mission-critical issue again — Raygun Alerting is now available for Crash Reporting and Real User Monitoring, to make sure you are quickly notified of the errors, crashes, and front-end performance issues that matter most to you and your business. Set thresholds for your alert based on an increase in error count, a spike in load time, or new issues introduced in the latest deployment. Start your free 14-day trial at Raygun.com
• Sourcegraph – Transform your code into a queryable database to create customizable visual dashboards in seconds. Sourcegraph recently launched Code Insights — now you can track what really matters to you and your team in your codebase. See how other teams are using this awesome feature at about.sourcegraph.com/code-insights
• Retool – The low-code platform for developers to build internal tools — Some of the best teams out there trust Retool…Brex, Coinbase, Plaid, Doordash, LegalGenius, Amazon, Allbirds, Peloton, and so many more – the developers at these teams trust Retool as the platform to build their internal tools. Try it free at retool.com/changelog

Featuring:

• Estelle Weyl – Twitter, GitHub
• Amal Hussein – Twitter, GitHub

Show Notes:

• web platform tests
• test262 report
• Estelle’s CSS slides
• Google’s web.dev site
• Open Web Docs
• MDN: Cascade
• MDN: Cascade Layers
• MDN: Specificity
• MDN: important
• Merry-Go-Round
• Specificity with Fish

Something missing or broken? PRs welcome!

Timestamps:

(00:00) - Opener
(00:22) - Sponsor: Raygun
(01:55) - It's party time, y'all!
(02:45) - Welcoming Estelle
(04:56) - Estelle's background
(07:43) - How WHATWG was created
(10:17) - MDN as your default search engine
(12:45) - The CSS Working Group
(18:07) - HTML and CSS working together
(20:03) - Sponsor: Sourcegraph
(22:42) - Hebrew & CSS test results
(25:28) - HTML imports
(26:52) - We should use @Imports in CSS
(27:47) - Introing new CSS features
(28:40) - Interop with Web Platform Tests
(31:17) - Interop driving new CSS features
(31:51) - A11y concerns with
(33:56) - All about the :has() selector
(36:10) - What's a forgiving selector list?
(38:55) - What's a relative selector list?
(39:47) - Practical uses of :has()
(43:31) - Sponsor: Retool
(44:27) - Cascade Layers
(50:15) - A useless piece of trivia
(51:49) - Back to Cascade Layers
(53:59) - Styling your style
(56:56) - The content editable attribute
(57:57) - Enumarated vs boolean attributes
(1:00:10) - Amal's amazing song of clarity
(1:01:46) - Back to content editable
(1:03:48) - The hidden attribute
(1:07:05) - JS is not very forgiving
(1:08:35) - HTML is incredibly powerful
(1:09:52) - The radio button
(1:14:25) - More about Open Web Docs
(1:16:40) - Why it's important to learn HTML
(1:21:24) - Things people don't understand about CSS
(1:23:41) - Cool HTML/CSS Pokemon
(1:26:50) - Wrapping up!
(1:30:52) - Outro