CSS-Tricks @[email protected]

Use#CSS to customize HTML list bullets (and more!) in the upcoming Chromium 86 release (Canary or Beta today)
🆕 individual && global selectors
li::marker {
color: var(–neon-pink);
}
li:first-child::marker {
font-size: 1ex;
}
Learn more 👉
https://web.dev/css-marker-pseudo-element/

How to Simplify SVG Code Using Basic Shapes
https://css-tricks.com/how-to-simplify-svg-code-using-basic-shapes/

State of Jamstack 2020: Data Deep Dive by @kenticokontent.
https://css-tricks.com/state-of-jamstack-2020-data-deep-dive/

A Complete Walkthrough of GraphQL APIs with React and @fauna
(❥s for the sponsorship and useful info, Fauna gang!)
https://css-tricks.com/a-complete-walkthrough-of-graphql-apis-with-react-and-faunadb/

Re 😮 And there’s also a new#CSSPodcast today!
On one of my favorite topics: CSS Filters 🎉
Filter effects are very well supported and most can be polyfilled for IE6+
🤓 Learn more about them in Episode 23:
https://pod.link/thecsspodcast/episode/ZTU4NDI4ZGMtYTc1NC00Y2RlLWI5ZTYtYjlkM2IxOTAzNDZj

CSS Only Room Escape Game
This is an escape game only made in CSS.
I created all of the assets, using MS paint to draw the image, and Paint . net to make the background color of the PNG files into transparent.
#html#css#gamedev#game#puzzle
https://codepen.io/takaneichinose/pen/YzqreVp?editors=0000

Using @property for CSS Custom Properties
https://css-tricks.com/using-property-for-css-custom-properties/

making elements disappear with CSS
permalink:
https://wizardzines.com/comics/css-hiding/

Excluding Emojis From Transparent Text Clipping
https://css-tricks.com/excluding-emojis-from-transparent-text-clipping/

How to Use CSS Grid for Sticky Headers and Footers
https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/

Comparing Browsers for Responsive Design
https://css-tricks.com/comparing-browsers-for-responsive-design/

How to Make a Media Query-less Card Component
https://css-tricks.com/how-to-make-a-media-query-less-card-component/

Come to Web Unleashed!
https://css-tricks.com/come-to-web-unleashed/

Even when playing video games I’m thinking about CSS..
Here’s the Beat Saber logo in HD CSS color (
HSL for srgb screens
p3 for HD screens (& browsers)
https://caniuse.com/#feat=css-color-function
https://codepen.io/argyleink/pen/XWdapvY

Ground Rules for Web Animations
https://css-tricks.com/ground-rules-for-web-animations/

Number Scrubbing
https://css-tricks.com/number-scrubbing/

a11y is web accessibility
https://css-tricks.com/a11y-is-web-accessibility/

I’m working on a Web site that has an RTL version. This is where#CSS logical properties truly shine as they make styling both LTR & RTL possible using the same declarations. Fewer overrides & overall less code.🙌🏻
Demo:
More info:
https://codepen.io/SaraSoueidan/pen/3703b343f35edff2954b7b3d03485e61?editors=1100
https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/

Here’s How I Solved a Weird Bug Using Tried and True Debugging Strategies
https://css-tricks.com/heres-how-i-solved-a-weird-bug-using-tried-and-true-debugging-strategies/

Copy the Browser’s Native Focus Styles
https://css-tricks.com/copy-the-browsers-native-focus-styles/