Thread by @innovati: "This year for I'll be covering some of the most requested styling features and how they can be used with CSS. This will be a mo […]" #merryCSSmas #css #javascript #rwd

Tommy Hodgins @innovati

, 21 tweets, 23 min read Read on Twitter

This year for #merryCSSmas I'll be covering some of the most requested styling features and how they can be used with CSS. This will be a month-long series showing ways that simple, valid CSS, and simple JavaScript functions can work together to style anything you can imagine!

Dec 1: Parent Selector 🎄🎁 Though CSS doesn't have a :parent selector, you can create your own with a small JavaScript function and use a selector like [--parent] in your CSS stylesheets today!

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#css #javascript

Supporting your own parent selector in CSS with [--parent]

Dec 2: The :has() Selector ⭐️✨ Even though this selector has been specced in CSS for years, no browsers support it yet. Thankfully it's easy for us to support with a selector like [--has] in our CSS

demo: codepen.io/tomhodgins/pen…
code: github.com/tomhodgins/jsi…

#rwd #webdesign

Dec 3: Closest Selector ❄️☃️ Imagine if you could target the closest element matching another CSS selector? We can use [--closest=''] in our CSS and make it work with a little #vanillaJS

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#merryCSSmas #selector #mixin

Targeting the closest element to another element based on a given CSS selector

Dec 4: First-in-document Selector 🤶🎅 Imagine a selector that works the same as document.querySelector() in JavaScript, finding the first element in the whole document matching a CSS selector

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#frontend #webdev

Targeting the first element matching a selector in CSS with [--first]

Dec 5: Last-in-document Selector 🧤🧣 Imagine a selector in CSS that works like document.querySelectorAll()[length - 1] in JavaScript, finding the last element in the document matching a CSS selector

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#css #selector

Targeting the last-in-document in CSS with [--last]

Dec 6: Elder Sibling Selector 🛷💨 Imagine a CSS selector that would target all previous sibling elements of another element, we can support this with a pinch of JS and a selector in CSS like [--elder]

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#css #javascript

Supporting an elder selector in CSS with [--elder]

Dec 7: Previous Sibling Selector 🎁💝 Imagine if CSS had a :previous selector to target the preceding element like previousElementSibling() does in JS. We can invent our own selector for CSS like [--previous]

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#css #web

Targeting the previous element sibling in CSS with [--previous]

Dec 8: Select by Text Content 🏒🥅 Have you ever wished CSS could target elements based on their text content? There are a couple ways to DIY this, the simplest is using [--contains] to match a string!

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#webdesign #js

Targeting a tag based on its text content with [--contains]

Dec 9: Regex Selector ⛷🏂 What would a :regex() selector do in CSS? We can invent our own [--regex] selector to target elements by matching patterns in their text content!

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

#regex #css #selector

Pattern matching an element's text content with [--regex]

Dec 10: Computed Style Selector 🍪🥛 Imagine if there was a CSS selector that targeted tags based on their computed styles. We can use a vanilla JS function and a selector like [--computed] in our CSS to do that right now!

demo & code: codepen.io/tomhodgins/pen…

#css #vanillajs

Using [--computed] in CSS to target tags based on their computed style in the browser

Dec 11: Nth-letter and Nth-word ❅❆ Imagine if CSS could target individual letters or words in your text content by their position 🤔💡 We can use JavaScript to dream up our own :nth-letter(n) or :nth-word(n) selectors!

code & demo: codepen.io/tomhodgins/pen…

#css #selector #html

Building our own nth letter and nth word selectors in CSS with [--nth-letter] and [--nth-word]

Dec 12: Media Pseudo-Classes 🎅🦌 Ever wish CSS selectors like :playing and :paused had browser support, or selectors like :muted or :current-time() existed at all? We can invent the new ones just as easily as we can support the real ones!

code & demo: codepen.io/tomhodgins/pen…

Media pseudo-classes for CSS using [--playing], [--paused], [--muted], and [--current-time]

Dec 13: @document support 🥌🧹 Are you sad that @document got postponed? No worry, JS is aware of the document's location so we can create support for our own @document in CSS today to target pages by their URL

code & demo: codepen.io/tomhodgins/pen…

#polyfill #extend #webplatform

Adding support for @document using @supports (--document()) in our CSS stylesheets

Dec 14: :not(:blank):valid and :not(:blank):invalid 🎅☃️ These are two very specific selectors that are useful when styling forms, similar to what you can do with :placeholder-shown but not depending on a placeholder to work

code & demo: codepen.io/tomhodgins/pen…

#css #selector

Using [--not-blank-valid] and [--not-blank-invalid] to style form inputs based on their state

Dec 15: Element Queries 🍪🤶 Ever wish you could set responsive breakpoints based on an element's own properties? It's easy to support as a pseudo-class or as a custom at-rule in CSS!

code: github.com/tomhodgins/deq…
demo: tomhodgins.github.io/deqaf-demo/dist

#elementqueries #containerqueries

Using [--element] and @supports (--element) {} to support element queries in CSS stylesheets

Dec 16: Attribute Comparison 👼🎄 One feature I wish CSS had was the ability to compare attribute values as numbers with <, <=, ==, >=, > comparisons, thankfully we can invent our own selector for this using something like [--attr] in our CSS

code & demo: codepen.io/tomhodgins/pen…

Using our own [--attr] selector in CSS to compare attribute values as numbers

Dec 17: Custom Specificity 🎿⛸ Have you ever wished you could set the specificity of a rule separately from the weight of its selector? Here's how to work with custom specificity levels in CSS

demo: codepen.io/tomhodgins/pen…
code: github.com/tomhodgins/jsi…

#css #webdev #webdesign

Using a [--specificity] selector in CSS as a way to set our own custom specificity levels for rules

Dec 18: Viewport Visibility 🦌🛷 Write styles that apply when elements are partly or fully visible vertically inside the viewport. We can use JavaScript to support a custom at-rule in CSS by writing a feature query

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

Using @supports with a custom viewport function in JavaScript to determine when a stylesheet should apply to the document based on the visibility of elements on the page.

Dec 19: Horizontal Overflow ❄️💈 You can use JS to create a custom at-rule in CSS to target an element when it is horizontally overflowed, letting you to style it in ways that help the user navigate your content better

demo: codepen.io/tomhodgins/pen…
code: npmjs.com/package/jsincs…

Using @supports (--overflow()) in CSS to target elements based on their horizontal overflow

Dec 20: Navigator Queries 🎅🧝‍ Declare styles in CSS that target different browsers based on matching information from the browser's Navigator object—this technique is useful for precise fixes in specific browser versions!

code & demo: codepen.io/tomhodgins/pen…

#css #rwd #webdev

Using @supports (--navigator()) in CSS to declare styles targeting different browsers based on matching information in their Navigator object

Like this thread? Get email updates or save it to PDF!

Subscribe to Tommy Hodgins

Get real-time email alerts when new unrolls are available from this author!

This content may be removed anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Like this thread? Get email updates or save it to PDF!

Subscribe to Tommy Hodgins

This content may be removed anytime!

Try unrolling a thread yourself!

Related hashtags

Related threads

Trending hashtags

Did Thread Reader help you today?