CSS "display" is Multi-Keyword Property

CSS "display" is Multi-Keyword Property - What You Need To Know

Рет қаралды 1,824

Күн бұрын

Learn how the multi-keyword syntax of CSS display property works and why you should start using it, along with an explanation of Block Formatting Context (BFC) and newer Flow and Flow-Root display values.
🔗 Links
Demo: codepen.io/ZoranJambor/pen/XW...
Multi-keyword syntax: developer.mozilla.org/en-US/d...
Block formatting context: developer.mozilla.org/en-US/d...
Logical CSS Properties: • In-Depth Guide to CSS ...
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com/
🏷️ Use coupon code KZfaq25 to get an additional 25% off on the already discounted, pre-launch price.
📖 Chapters
00:00 Intro & demo setup
00:42 How display property works with block & inline values
02:07 How display property works with flex & grid values
03:24 How inner and outer display type work
04:30 Multi-value mappings for existing values & browser support
05:04 How flow and flow-root values for display property work
05:37 What is Block Formatting Context (BFC)
06:23 How to clear float with flow-root property
08:24 Should you use multi-keyword syntax for display?
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#css #cssbasics

Пікірлер: 8

@ahmad-murery 10 ай бұрын

I didn't know about the two keywords syntax so I didn't use it before and I'll continue to use the single keyword syntax in future projects. I like the display: flow-root as it's logical and makes sense. Thanks Zoran!

@CSSWeekly 10 ай бұрын

Thank you for sharing this, Ahmad! 🙏 I suppose that not many people will switch, at least not yet. But you'll still see multi-keyword syntax in my future videos. 🙂

@badcatdesign 10 ай бұрын

The amount of time it must take new learners to learn CSS is probably now equal to the amount of time it takes people who have decades of experience to rethink everything. 🤯

@CSSWeekly 10 ай бұрын

That's a very interesting way to put it! 🙂 There definitively is a lot more to learn now than a decade or even a few years ago. It certainly is challenging regardless if you're starting out or if you're just trying to keep up with everything new that's coming. And CSS Weekly's mission is precisely to help with this. 🙂

@Killyspudful 10 ай бұрын

Nice work, man - thank you. By the way - one nice use-case for the two-keyword syntax is 'display:inline list-item' - for when you want bullets on a inline set of items...

@CSSWeekly 10 ай бұрын

Thank *you* so much for your kind words, watching, and commenting! 🙂