{ CSS snippets }

Smashing Magazine @smashingmag

Cropping away negative impacts of line height. https://t.co/fufJSztGlH https://t.co/84wLlvbzaw

math2001 @_math2001

#tip the 'turn' unit in #css https://t.co/Q4kWUM99cr

Wes Bos 🔥 @wesbos

Two things I’ve been doing lately: 1. using aria-attributes in my CSS to dictate different UI states. (aria-busy for loading, aria-expanded for open/closed navs) 2. Disabling an entire <form> during loading states by wrapping in a fieldset. Using CSS to add loading animation https://t.co/rW1uRNK8eG

Large Heydon Collider @heydonworks

Using `clip-path` for an arrow shape. So much better than a background image. #CSS https://t.co/5sDum3WFUB

Jason Miller 🦊⚛ @_developit

#hottip: Make your layout fast & static by default. Turn on content-based sizing on a per-element basis. https://t.co/HD6Re24Ijq

mathieu rothenberg 🇫🇷 @mattrothenberg

.@tailwindcss makes it super easy to defer color palette generation to a library like Chroma JS – the sky is the limit 😍 https://t.co/iXrvOYCypR

Achraf Kassioui @achrafkassioui

CSS tip: the <main> element isn't recognized as a default block level element in Internet Explorer. Set it to display: block in CSS so IE can display it correctly.

Achraf Kassioui @achrafkassioui

CSS gem learned today: box-decoration-break. It tells how some visual effects are applied when an element is fragmented, for example after a line break. https://t.co/nuuv7r89aj See https://t.co/DdkINE5p1W

Maxim Vanhove @MrMaximVanhove

A CSS trick I use a lot is the border shorthand without the color. This will result in a border with the same color as the text color. https://t.co/aBUfTgvFIE

Wes Bos 🔥 @wesbos

🔥 CSS Variables are perfect for overwriting parts of a definition that can’t be broken up like text-shadows, transforms or gradients https://t.co/6vKDLNgg1T

Matt Smith @AllThingsSmitty

I snuck this little #CSS gem into a project stylesheet to help the team remember #accessibility. 😎 #WebDev https://t.co/48kMmTaPoW

Wes Bos 🔥 @wesbos

Another neat thing you can use CSS Grid for is managing full bleed and contained layouts. Very similar to max-width; margin: 0 auto; https://t.co/gcuEtBHTEi

Wes Bos 🔥 @wesbos

🔥 You can set and use variables inside a CSS declaration. Handy for when you need the same value more than once! https://t.co/tjLV3h7Z8I

Wes Bos 🔥 @wesbos

Bootstap 12 column grid in 5 lines of CSS. One of many ways to lay out of a page in CSS grid. You won’t be needing frameworks for layout much longer 😃 https://t.co/DlxeNesna1

Jonas @JonasBadalic

A reminder that you can avoid jumpy numbers with tabular numbers and font-feature-settings. 🚀 https://t.co/lo3M5xK4k9 https://t.co/m7UsQs1xDh

Steve Schoger @steveschoger

🔥 Little details go a long way when styling UI components. Here are a few different ways to style buttons: https://t.co/rsbtaZ1Peh

CSS-Tricks @Real_CSS_Tricks

If you need border-radius on those table elements, you'll need to keep `border-collapse: separate` https://t.co/1lYmqeC6W5

Smashing Magazine @smashingmag

Hint: you can also use a range form in your media queries: @media (width > 900px) { /* wider than 900px */ } via @WebPlatformNews

Dave Rupert @davatron5000

TIL a `position: fixed` element (e.g. modal) in Chrome & Firefox behaves like `position: absolute` when parent has `will-change: transform`

Jeff @Jeffer_8a

🔥Plain css variables . [new variable] "--varColor: #BADA55" [use] "color: var(--varColor)" #CSS #FrontEnd https://t.co/HK64xuidqQ