Playing: 021: What's New in CSS? Variables, Scoping, New Selectors and Color Functions
Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources
Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials
Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course
Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions
Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!
Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!
Nov 29th, 2017
What's New in CSS? Variables, Scoping, New Selectors and Color Functions👇 Download Show✏️ Edit Show Notes
Wes and Scott talk about the future of CSS - what is new and what should we expect to be coming in the near future?
Bug Replay — Sponsor
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.
Freshbooks — Sponsor
If you are a small business or freelancer check out Freshbooks.com Cloud Accounting and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
The Show Notes!
- IT'S NOT CALLED CSS4
- You can find the different levels over at CSS Working Group Drafts
- 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?
- CSS Tricks: The CSS attr() function got nothin’ on custom properties
- Independent Transforms -
transform: rotateX(var(--x)) translateY(var(--y));
- CSS Level 4 Selectors
- ITS NOT CSS4!!!!!!
:nth-child(3n of img.dog)
- Some not-so-new-but-still-cool units
- Viewport Units
- min-height: 100vh
- ch units
- ex units
- CSS Angles - deg(), grad(), rad(), turn()
- Scott: Google Pixel 2 XL
- Wes: Anker 5 Port 40w USB Charger
- Anker 10 Port 60w USB Charger
- Anker 5 Port 60w with a USB-C Port