browser compatibility

In this episode of Syntax, Wes and Scott go over some of the results the State of CSS survey for 2023, including drop-shadow, subgrid, logical properties, media range, and more!

Show Notes

• 00:25:21 Welcome
• 01:31:22 Soccer update
• 03:52:05 Syntax Brought to you by Sentry
• 04:03:18 StateOfCSS.com
• State of CSS 2023
• 04:21:11 Top 5 Most Used Features
• 09:13:09 Drop-shadow
• 13:00:11 Subgrid
• 18:31:21 Logical properties
• 20:11:20 Media range
• 20:52:11 Object view box
• 23:10:14 Anchor positioning
• 28:21:09 Intrinsic sizing keywords
• 29:32:00 View Transitions API
• Can I use… Support tables for HTML5, CSS3, etc
• Astro
• Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580
• 31:43:18 Updates to colors in CSS
• 35:07:05 Accent color, current color
• 36:36:11 Scroll snap and overscroll behaviour
• 39:04:22 Touch action
• 40:16:01 Line clamp or variable font
• Variable Fonts
• 45:28:11 Accessibility features
• 48:33:12 :Has has jumped
• 49:32:11 @Property
• 53:52:13 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Kodiak Cakes Strawberries & Cream Oatmeal Packets (Pack of 6)
• Wes: Food Storage Containers, Baby Food Storage Containers with Lid, Baby Food and Toddler Snack Containers

Shameless Plugs

• Scott: Syntax Podcast (@syntaxfm) | TikTok
• Wes: Web Unleashed 2023 - FITC

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 — why it’s such a cool thing and why they’ve been waiting for it for so long.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

04:33 - The spec

• https://drafts.csswg.org/css-grid-3/
• https://twitter.com/wesbos/status/1320735900343668738

06:10 - How it works

• masonry-auto-flow: next;
  1. It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down.
  2. Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column.
  3. grid-template-columns and grid-template-rows can now be marked as masonry and this specifies which axis will be masonry.

09:06 - The implicit grid

• https://drafts.csswg.org/css-grid-3/#%23implicit-grid
• The implicit grid is formed in the same way as a regular grid container. However, it’s only used in the grid axis.
• Interesting in a column situation (see images).

13:25 - Thoughts

• Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS.

Links

• David DeSandro
• https://metafizzy.co/
• Chris Coyier
• https://caniuse.com/
• Isotope
• Flickity

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk with Adam Argyle about how stuff gets added to CSS.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Guests

• Adam Argyle

Show Notes

01:48 - Who are you and what do you do?

04:13 - How does stuff get added to CSS?

06:44 - Github issue proposal or public document

• Shares use case
• Problem made succinct
• StrawMan solution
• JS demo

10:12 - Time

• Multiple proposals
• Comments
• Back and forth
• Bikeshedding

20:00 - Editor’s draft spec (Stage 1)

• CSS typed
• Examples
• Provided code logic
• Implementor interest
  • Can go stale
  • Explainer
• Implementor
  • Prototype behind flags in browser
  • Intent to Prototype (I2P)

24:42 - Working Draft (Stage 2)

• WPTs
• Prototype behind flags in browser
• Needs two or more to graduate
• Intent to Ship (I2S)

24:54 - Conference Calls

• Around 10 items to discuss
  • Issues or proposals
• Flexible list
  • Things can be injected as emergency
  • Things can get punted to the next call

25:26 - Face 2 Face (F2F)

• Four times a year
• Presentations
• Breakout sessions
• Houdini focus groups, etc
• Try to resolve as many Github issues as possible

27:34 - Candidate Recommendation (Stage 3)

• Could still be behind a flag
  • Edge cases are being worked through
  • WPTs and standards are being nudged into a final state

44:20 - Roles

• Spec author
• Community Member
  • Print
  • Color
  • Internationalization
  • Box Model
  • AOM
  • JS APIs
  • Renderers
  • etc
• Implementor
• It’s like pub/sub, where spec authors pub and implementors sub, and the community tries to help shape the message that’s published while supporting the subscribers who need to implement and make it real

46:32 - Questions

• What language is CSS written in?
• What's the deal with Houdini?

Links

• https://github.com/w3c/csswg-drafts
• @rachelandrew
• @hj_chen
• Incomplete List of Mistakes in the Design of CSS
• 10 Things I Regret About Node
• https://ishoudinireadyyet.com/

××× SIIIIICK ××× PIIIICKS ×××

• Adam Wok
• Scott: Balance Pad
• Wes: Security Bit Set

Shameless Plugs

• Adam: The CSS Podcast
• Scott: CSS Design Systems - Sign up for the year and save 25%!
• Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about IE11 — should you support it, what to be aware of if you do, and what data is important in making that decision.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

03:21 - When was IE11 made?

03:48 - When is it deprecated?

04:44 - How to make the decision?

• Look at your analytics
• Look at your users
• Is a 2% drop in sales worth it?

09:00 - What doesn’t IE11 have? What can you start using now that IE11 is gone?

• Modern Flexbox
• CSS Grid
• CSS Variables

10:26 - Can you partially support it?

• Major features
• Progressive enhancement
• Gracefully degrade
• Polyfill

11:16 - What about testing?

Links

• wesbos.com
• VirtualBox
• modern.ie
• IE11
• Surface Book

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes continue a three-part series about old browsers, fallbacks and polyfills. In part two, they talk specifically about CSS Grid, Flexbox, new features and fallbacks, and how to use them.

VueSchool.io — Sponsor

Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.

Show Notes

3:08 - CSS Grid and Flexbox

• Flexbox old spec
• Flexbox new spec
• CSS Grid
• Some popular options for supporting for supporting CSS Grid and/or Flexbox:
  • Just serve the mobile layout
  • Display block
  • Separate layout that you will eventually delete
• Can I Use
• Do websites need to look exactly the same in every browser?
• Modernizr
• CSS3, Please!
• Autoprefixer

12:38 - CSS Variables

• Double define
• Just like Grid, unknown def will be ignored and fallback to CSS
• CSS Houdini

17:00 - Fallback Code

• @supports
• Display block then display grid
• Feature Testing
• Detect the browser as a last resort

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets