Annie 🦄⚡ @anniebombanie_
🚀#CSS Tip Pseudo-elements can trip you up sometimes. Here's a lil something explaining their stack order. To change their natural order, assign these two properties: 1️⃣ z-index: __; 2️⃣ position: absolute; ⚠️ You MUST use a negative number to position it *under* its parent. https://t.co/YirNdyt8aZ
Doug Sillars @dougsillars
Your periodic reminder that using "display:none" in your CSS does not also mean "download:none" https://t.co/eZZNnrQ3OS
💫 Josh @JoshWComeau
Oh this is cool! CSS now has `lh` units. `1 lh` is equivalent to the total computed line height. So you can size something according to the text it sits next to, for example. https://t.co/5o8jumSMLX https://t.co/kOIJvN4uum
Simone - Hacker Typer 🇪🇺 @Duiker101
You can test if a browser supports a CSS property by using CSS.supports. Pretty useful if you want to make some super fancy stuff in your website and you want to gracefully fallback if it's not available, rather than breaking the experience. #100DaysOfCode #javascript #css https://t.co/l1w9BhhOdn
Wes Bos @wesbos
🔥 background-position can take four values which allows you to anchor from a specific corner and then skirt it around from there. https://t.co/fxJyj91Y2n
Wes Bos @wesbos
🔥 You can use new CSS logical properties instead of top/bottom/left/right. Makes designing multi-language websites much easier when the flow direction changes. CSS Grid and Flexbox already setup for this with start/end values. https://t.co/gielwhWQBI
🌴 Lucas Hugdahl @LucasHugdahl
Use CSS variables in your transforms so you don't need to rewrite the whole transform rule in order to transition a single property. Thanks @syntaxfm @wesbos @stolinski #webdevelopment #code https://t.co/hOyqnG5oH0
Wes Bos @wesbos
🔥 Need elements to overlap? Assigning multiple elements the same CSS Grid row and column is a good alternative to absolute positioning. https://t.co/XbtqHwzcTe
Aaron Iker @aaroniker_me
overscroll-behavior: contain; Quick CSS trick: - disable parent scrolling when child container (like sidebar) reaches scroll end. Demo https://t.co/0AFm0W9goD Support https://t.co/lEnfJx5qq7 https://t.co/UxIME6vkqE
Zak Nesler @zaknesler
Fellow #MacOS devs, try to avoid using "overflow: scroll" in containers that might overflow. It always forces a scrollbar on Windows, even if one is not necessary. Use "overflow: auto" instead. 😉 https://t.co/gLzCvq2IOZ
Patrick Brouwers @patrickbrouwers
? TIP When using PurgeCSS with classes that get dynamically created via e.g. a JS-library, you can whitelist them right in your CSS file #laravel https://t.co/tU3ngY71X0
Swizec Teller @Swizec
Oh you haven't heard of "presentational" attributes? It means they listen to CSS. If you ain't keen on adding a bunch of attributes, you can use CSS. Even styled-components. https://t.co/jFllGjJYlR
Sara Soueidan @SaraSoueidan
#TIL there is a cross-browser supported #CSS media feature that tests whether a device has a primary input that can hover over elements. @media (hover: hover || none ) { ... } https://t.co/O6DjKKv4hi h/t @NickColley
Wes Bos @wesbos
? CSS variables can be set to other CSS variables. Also we will soon be able to tweak colours with colour functions in CSS directly. Good for Canadians who can never remember which way to spell grey https://t.co/oqn74uDF4g
Ben Furfie @frontendben
Here's a really neat trick I always use in all my #tailwindcss powered sites. Need to make you <p> tag white but don't want to add text-white to every tag? You don't have to. Simply leverage the power of color: inherit. https://t.co/cfkoCb487k
Tyler van der Hoeven @tyvdh
Today I learned about `font-variant-numeric: tabular-nums;` Basically makes a text value act like monospace so when you’re scaling it up and down via a slider etc. it doesn’t jump around as much. https://t.co/2nb9ym3Khf
MDS @mds
I made a thing for a Streamline + @css promo and channeled my inner @steveschoger for one of the supporting images. https://t.co/3YaszuwAEH https://t.co/1d5uk5u5Up
Samantha Ming @samantha_ming
Style the Cursor Color in CSS ? Use the `caret-color` to change the color of the cursor (caret). It's the blinking cursor when you click on the <input> or <textarea>. Now you can change the color to match the theme of your website ? #100DaysOfCode #CodeNewbie #301DaysOfCode https://t.co/HBsX36YAvg
Wes Bos @wesbos
? Did you know CSS has a `turn` unit? It’s often easier to turn something `rotate(0.75turn)` instead of doing the math to `rotate(270deg)`
adam kuhn @cobra_winfrey
for this week's #CodePenChallenge I whipped together a tool to better visualize CSS border-radius properties; some pretty interesting shapes can be achieved with this simple property https://t.co/RkzIQNPVWg https://t.co/t885l5KMAP
