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!

Chapter

1. Opener (00:00:00)

2. Sponsor: Raygun (00:00:22)

https://raygun.com/?utm_medium=podcast&utm_source=jsparty&utm_campaign=changelog&utm_content=homepage

3. It's party time, y'all! (00:01:55)

4. Welcoming Estelle (00:02:45)

5. Estelle's background (00:04:56)

6. How WHATWG was created (00:07:43)

7. MDN as your default search engine (00:10:17)

8. The CSS Working Group (00:12:45)

9. HTML and CSS working together (00:18:07)

10. Sponsor: Sourcegraph (00:20:03)

https://info.sourcegraph.com/changelog

11. Hebrew & CSS test results (00:22:42)

12. HTML imports (00:25:28)

13. We should use @Imports in CSS (00:26:52)

14. Introing new CSS features (00:27:47)

15. Interop with Web Platform Tests (00:28:40)

16. Interop driving new CSS features (00:31:17)

17. A11y concerns with  (00:31:51)

18. All about the :has() selector (00:33:56)

19. What's a forgiving selector list? (00:36:10)

20. What's a relative selector list? (00:38:55)

21. Practical uses of :has() (00:39:47)

22. Sponsor: Retool (00:43:31)

https://retool.com/changelog

23. Cascade Layers (00:44:27)

24. A useless piece of trivia (00:50:15)

25. Back to Cascade Layers (00:51:49)

26. Styling your style (00:53:59)

27. The content editable attribute (00:56:56)

28. Enumarated vs boolean attributes (00:57:57)

29. Amal's amazing song of clarity (01:00:10)

30. Back to content editable (01:01:46)

31. The hidden attribute (01:03:48)

32. JS is not very forgiving (01:07:05)

33. HTML is incredibly powerful (01:08:35)

34. The radio button (01:09:52)

35. More about Open Web Docs (01:14:25)

36. Why it's important to learn HTML (01:16:40)

37. Things people don't understand about CSS (01:21:24)

38. Cool HTML/CSS Pokemon (01:23:41)

39. Wrapping up! (01:26:50)

40. Outro (01:30:52)