Weightless CSS - HTTP203 Advent
Skills:
HTML & CSS80%
Key Takeaways
Explains weightless CSS, a new pseudo-class for matching elements without impacting specificity
Full Transcript
[Music] we are in the month of Christmas but that is also the last month of 2017 true so we're thinking towards 2018 in the things and going to be landing in browsers or things we'll be thinking about in that year so I want you to spend like the next two minutes introducing a subject you can quiz me about it and we'll see if we can come up with something that we can actually publish on YouTube right here we go two minutes I want to talk about weightless CSS weightless that is one of the words I said the other one is CSS so CSS with a weight yes that is a good reversal and what is some weight okay so when you write a CSS selector it has specificity that is correct yes which if I I could call weight if I didn't want to risk trying to pronounce asbestos it means specifically less CSS is exactly can you see now why I went for weightless CSS yes so this is a proposal that was agreed on in TPAC mm-hmm and 2017 in 2017 and livery was telling me about it and and the idea is they haven't settled on a name yet but it would be something like is in the same way that like like : is and then a function yes exactly that and inside you could put like a simple selector Oh like dot foo so that would make a selector make match without increasing its specificity exactly that so you be able to use all of the stuff that you can use outside is or whatever it's called but it would have like yeah why are your specificity because this is this is the CSS working groups attempt to meet people halfway that don't enjoy the Cascade so much oh I see so one of the things that you know the complaints are the one of the reasons they've seen people go to CSS and JavaScript is that this new hole just attach it to the element directly exactly I send their models a lot simpler so it's can they bring that to regular style sheets as an option where just things will be done sequentially can I use child selectors in the is thing I don't think so because that was one of the long-standing things that people wanted to or that they if you contain a thing of that type then style me the other way around or something no it would just be simple selectors but no specificity this the out-of-time editor it's the template proposal from apples Oh Apple template proposal the Appleton doesn't hold so what like what they proposed
Original Description
In this Xmas episode of HTTP203, Jake talks about weightless CSS: a new pseudo-class that lets you match elements without impacting specificity.
Draft spec: https://goo.gl/AU9p4T
NEW EPISODE OF HTTP203 EVERY DAY. Check back in with us for new HTTP203 Advent episodes everyday on the Chrome Developers channel.
Subscribe to Chrome Developers here: http://goo.gl/LLLNvf
Watch more HTTP203: https://goo.gl/bTQMrY
Listen to the HTTP203 podcast for a full conversation & much more:
https://goo.gl/LR7gNg
Itunes: https://goo.gl/cf2yRq
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Chrome for Developers · Chrome for Developers · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
Web Directions Code 2015 round up
Chrome for Developers
Maintainable Code - HTTP203
Chrome for Developers
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
The Guardian - Supercharged
Chrome for Developers
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
The Future of JavaScript - HTTP203
Chrome for Developers
Data Binding 101 -- Polycasts #28
Chrome for Developers
The Guardian part 2 - Supercharged
Chrome for Developers
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
Binding to Objects -- Polycasts #30
Chrome for Developers
Player FM - Supercharged
Chrome for Developers
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
Jake Beats Wikipedia - HTTP203
Chrome for Developers
Supercharged Observers! -- Polycasts #32
Chrome for Developers
Jai's Web blog - Supercharged
Chrome for Developers
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
Google+ Performance Improvement Comparison
Chrome for Developers
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
Binding to Arrays -- Polycasts #35
Chrome for Developers
HTTP2 - HTTP203
Chrome for Developers
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
Call For Submissions - Supercharged
Chrome for Developers
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
Highlights from Chrome Dev Summit 2015
Chrome for Developers
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers
More on: HTML & CSS
View skill →Related Reads
📰
📰
📰
📰
React Introduction
Dev.to · Karthick (k)
Why SnapDOM Beats html2canvas for DOM-to-Image Capture
Dev.to · Juan Martin
I built 42 landing page templates as single HTML files (no npm, no build step)
Dev.to · Segcam spa
Part 7B — Section 2 — React Event Handling Explained: Forms, Event Object & User Input.
Medium · JavaScript
🎓
Tutor Explanation
DeepCamp AI