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
{ CSS snippets }
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
Plum-best @Mcbest9
#webdev Learn something new everyday ?? No more messy RegEx to extract URL query/search parameters (interesting) #javascript #CSS https://t.co/5k4C5OGIJ1
Ryosuke @whoisryosuke
? Need to put your sidebar under your content on mobile? Use #CSS #Flexbox and #MediaQueries to reorder the elements on smaller viewports: https://t.co/SKdeseL2JB #HTML #CodeSnippets https://t.co/0vXjAfBEyW
CSS-Tricks @Real_CSS_Tricks
Little Tip: Draw Your Grid in ASCII in Your CSS Comments for Quick Reference https://t.co/wAo3hAFSlX https://t.co/3Oc5d68Lem
Keith Cirkel @Keithamus
There you have it folks. If you want your site to work with macos Mojave's Dark Mode, there's a css media query for it: prefers-dark-interface. https://t.co/ZwSM8V2qZM hat-tip @jonrohan https://t.co/EvtgkV4JsK
Wes Bos ? @wesbos
? All CSS background properties can take multiple values - helpful for layering colours, gradients and textures https://t.co/kfiTpekvag
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.