Defensive CSS

40 posts

Defensive CSS banner
Defensive CSS

Defensive CSS

@DefensiveCSS

Practical CSS and design tips that helps in building future-proof user interfaces. A project by @shadeed9

The Browser शामिल हुए Aralık 2021
1 फ़ॉलोइंग6.1K फ़ॉलोवर्स
Defensive CSS रीट्वीट किया
Web Directions
Web Directions@webdirections·
CSS allows you to build any layout you want. Unfortunately, we still don't care too much about preventing CSS issues upfront. So at Summit @shadeed9 will outline defensive CSS, a term he coined to describe CSS that is future-proof and defensive. buff.ly/3KwIrn1
Web Directions tweet media
English
0
3
11
0
Defensive CSS रीट्वीट किया
Ahmad Shadeed
Ahmad Shadeed@shadeed9·
I have updated defensivecss.dev and added a speaking section. It's amazing how quickly a simple idea can take off! 🤩 I am so excited for what is to come for @DefensiveCSS 🔥
Ahmad Shadeed tweet media
English
1
8
46
0
Defensive CSS
Defensive CSS@DefensiveCSS·
🌟 New Tip When working with multilingual websites, make sure to account for short content lengths by setting a minimum size. In this example, the button "Done" become too small in Arabic. We can fix that by setting a min-width in CSS. Read more: defensivecss.dev/tip/button-min…
English
3
25
161
0
Defensive CSS
Defensive CSS@DefensiveCSS·
💡 In CSS grid, we can choose between auto-fill and auto-fit for how a grid item should behave. The keyword auto-fit is risky, specially when we don't know the number of grid items. Read more in this defensive CSS tip: defensivecss.dev/tip/auto-fit-f…
Defensive CSS tweet media
English
1
58
345
0
Defensive CSS रीट्वीट किया
Ahmad Shadeed
Ahmad Shadeed@shadeed9·
It was an honor for me to give a talk on Defensive CSS to the @Supermetrics development team in Helsinki, Finland. This is a great experience for me and looking to spread the word even more about @DefensiveCSS 🤩
Ahmad Shadeed tweet media
English
2
3
73
0
Defensive CSS
Defensive CSS@DefensiveCSS·
It's a common mistake to use display: flex and forget about it. When the content gets longer, flex items will stretch to fill the parent. That's what happened to the image here. The fix is to use align-items or align-self depending on the use case. 🔗 defensivecss.dev/tip/default-fl…
Defensive CSS tweet media
English
1
12
126
0
Defensive CSS
Defensive CSS@DefensiveCSS·
@dym_sh Not for now. Please feel free to send a DM for any suggestion you might have.
English
0
0
0
0
Defensive CSS
Defensive CSS@DefensiveCSS·
Have you ever tried using position: sticky with CSS grid and it didn't work? You need to override the default behavior of CSS grid by applying align-self: start to the aside. ✍️ Find out more in this defensive tip: defensivecss.dev/tip/position-s…
English
7
47
374
0
Defensive CSS
Defensive CSS@DefensiveCSS·
⚠️ By default, flexbox will let its child items take up as much space as the content. This can lead to overflow issues. Learn more about how to prevent that. defensivecss.dev/tip/flexbox-mi…
English
3
20
122
0
Defensive CSS
Defensive CSS@DefensiveCSS·
@htmlvv You might have missed this part 😄
Defensive CSS tweet media
English
1
0
0
0
@vincent@oisaur.com
@[email protected]@htmlvv·
Is it just me who thinks that access to information is more important than presentation? @DefensiveCSS
GIF
English
1
0
1
0
Defensive CSS रीट्वीट किया
CSS Café
CSS Café@CSS__Cafe·
Want to get an idea of what "Defensive CSS" 🛡 exactly is? This Thursday would be *the* opportunity as @shadeed9 will be presenting his thoughts and ideas around it at our next online event! 🥳✨ 👇🏻 css.cafe
English
1
8
10
0
Defensive CSS
Defensive CSS@DefensiveCSS·
Hello world, I’m happy to publish Defensive CSS! 🥳 It's a resource explaining how to write CSS defensively, and how it can be used as a strategy for every front-end project. ✍️ More content is on the way! defensivecss.dev
English
21
237
1K
0

खोजें

@jeffscottward @layer @shadeed9 @ParisWeb @Supermetrics @dym_sh @htmlvv @elonmusk