What's New in CSS? Variables, Scoping, New Selectors and Color Functions

Syntax - Tasty Web Development Treats

Wes Bos

Js, Technology, Css, Html5, Tech News, Webdevelopment, News, Javascript, Html

4.9 • 1.1K Ratings

🗓️ 29 November 2017

⏱️ 58 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

Wes and Scott talk about the future of CSS - what is new and what should we expect to be coming in the near future?

You need to try out Bug Replay for recording and re-playing browser based bugs. It's a bug reporting tool that can be used at all stages of development and by anyone in your organization. Provide your dev team with detailed reports so they can fix bugs faster.

If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

The Show Notes!

03:30

IT'S NOT CALLED CSS4
You can find the different levels over at CSS Working Group Drafts

06:24

CSS Custom Properties (CSS Variables)
Bite and chew over the syntax - it's backwards compatible
What's the difference between this and Sass/Less/Stylus?
JavaScript30.com Day 3 uses JavaScript + CSS Variables
CSS Tricks: The CSS attr() function got nothin’ on custom properties
Independent Transforms - transform: rotateX(var(--x)) translateY(var(--y));

19:20

CSS Filters
Drop Shadow Filter
SVG Filters

28:20

31:00

36:00

CSS Level 4 Selectors
ITS NOT CSS4!!!!!!
css4.rocks

40:00

nth-of-selectoed
:nth-child(3n of img.dog)
div:has(img)

44:00

Some not-so-new-but-still-cool units
Viewport Units
min-height: 100vh
ch units
ex units
CSS Angles - deg(), grad(), rad(), turn()

Sick Picks

Tweet us your tasty treats!

Wes' Twitter
Wes' Instagram
Wes' Facebook
Scott's Twitter
Scott's Instagram
Make sure to include @SynaxFM in your tweets

Transcript

Click on a timestamp to play from that location

0:00.0	Welcome to Syntax, where we deliver tasty treats for web developers.
0:11.2	Hello everybody, welcome to Syntax.
0:15.8	My name is Wes.
0:16.8	I realize we actually never introduce ourselves and people are emailing me that they're
0:20.8	brand new to the podcast.
0:21.8	My name is Wes and this is Scott and this is a
0:25.0	podcast that we do about tasty treats and web development. Today we're going to be talking all about
0:29.5	what's new in CSS. So there's actually a lot of new stuff that's being added to the language
0:34.9	CSS is not standing still at all and some really exciting stuff that were sort of on the
0:39.7	verge of of being implemented in browsers or are already in in browsers that we can start using today.
0:45.1	So we're just going to rattle through a handful of the new things and talk about what they are and
0:50.7	when you might want to use them. This episode is sponsored by Fresh Books as
0:55.4	well as a company called Bug replay and we'll talk about both of those companies
0:58.8	partway through the episode. So hello Scott how you doing today? Hey I'm doing good. I am getting
1:05.1	over awful flu man it seems like I've been out like every other week for the past few
1:11.6	months here but I'm on the up and up here.
1:14.2	I got a little bit of a cough, so I'm gonna cough away
1:16.4	from the microphone.
1:17.2	I'm feeling a little bit better
1:18.8	and today is probably like the closest I felt to 100%.
1:22.4	So just excited to be back and feeling normal. How about you?
1:25.8	That's exciting. I am great. I'm just about to head off in a couple days to Paris for the dot j. j. s conference which I'm pretty
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.