#merrycssmas search results

Day 25: Merry Christmas! Here's a special gift for the final day of #merryCSSmas - nesting in valid CSS that works in browsers today. Check out my video introducing Anesthetic and how it works: - github.com/tomhodgins/ane… - npmjs.com/package/anesth… - youtu.be/-asK7zL-b3g

Day 7: Support your own --svg-encode() function when preprocessing CSS to inline SVG's from your filesystem as data URIs inside a url(), encoded more efficiently than base64 - example: github.com/tomhodgins/pro… - code: github.com/tomhodgins/pro… #merryCSSmas #svg #optimization #css

Day 6: Support your own --base64-encode() function when preprocessing CSS to inline files from your filesystem as data URIs inside a url() - example: github.com/tomhodgins/pro… - code: github.com/tomhodgins/pro… #merryCSSmas #css #optimization #performance

Day 5: Make responsive design friendlier by working with named media query breakpoints by defining your own breakpoints in a custom property, and then using the custom names with feature queries - example & code: codepen.io/tomhodgins/pen… #merryCSSmas #css #rwd #responsive

Day 4: Support your own @--rewrite-selector at-rule to prefix, suffix, and rewrite selectors - example: github.com/tomhodgins/pro… - demo command: npx process-css-demo '@--rewrite-selector prefix(.a ) { .b {} }' -c -b - code: github.com/tomhodgins/pro… #merryCSSmas #css #selectors

Day 3: Have you ever been writing a CSS rule and wished you could add a media query right there? You can embed a media query inside a custom property with all the information you need - example: codepen.io/tomhodgins/pen… #merryCSSmas #css #nesting #responsive #mediaquery

Day 2: Ever wished you could just make everything !important? Why not support your own custom @--important at-rule to do just that. - example: github.com/tomhodgins/pro… - code: github.com/tomhodgins/pro… #merryCSSmas #css

Day 1: Add your own custom CSS reset to any stylesheet by supporting your custom @--reset at-rule. - example: github.com/tomhodgins/pro… - demo command: npx process-css-demo '@--reset' -c -b - code: github.com/tomhodgins/pro… #merryCSSmas #css #preprocessor #reset #atrule

This year for the 3rd annual #merryCSSmas, I'm featuring 25 fun things you can do to transform valid custom CSS syntax into other things! Not everything will be practical, but it will show how fun working with 100% valid CSS syntax can be!

Deep-hover is the idea of hovering 'through' other elements if some are in the between that element and the cursor (regardless of their location in the DOM tree) Check out demos of each of these ideas in 2018's #merryCSSmas twitter thread ->

Now that #merryCSSmas is over, here are demo pages that include all the plugins from Dec 1–24th imported and ready to go! - client-side demo: staticresource.com/merry-cssmas-b… - source: gist.github.com/tomhodgins/c22… - server-side demo: staticresource.com/merry-cssmas-s… - source: gist.github.com/tomhodgins/f48…

Dec 31: Scroll-Based Styles 📜🎨 Teach CSS how to use the current scroll position of the page, or elements on the page as values inside your styles. This can be used for building animations that respond to the user scrolling! code & demo: codepen.io/tomhodgins/pen… #merryCSSmas

Dec 25: 🎅🎨 This #merryCSSmas it's time to think outside the stylesheet! Harness any streams of data JavaScript is aware of for styling purposes by using CSS Variables computed by simple JS functions to add the power of reactive programming to your CSS. github.com/tomhodgins/com…

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

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!

Yeah :D A few days into #merryCSSmas I came up with a new idea I couldn't wait to share…longest month ever waiting for Dec 25th to roll around

Now that #merryCSSmas is complete I can't wait to get back to my usual tweets about CSS 😂

Day 25/25 🎅 Excited to finally release a new kind of HTML compiler I've been working on. It lets you write Container Queries and compile them down to native CSS media queries. - view on Github: github.com/tomhodgins/qom… #merryCSSmas #elementqueries #containerqueries #css #rwd

Day 24/25 😄 Do (almost) everything listed so far this month all in one plugin with EQCSS - plugin: elementqueries.com - demo: codepen.io/tomhodgins/pen… #merryCSSmas #eqcss #elementqueries #containerqueries #rwd

Day 23/25 🤶 Apply styles to all elder siblings of elements matching a CSS selector with Elder Selector Mixin - plugin: github.com/tomhodgins/rep… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #elder #sibling #selector

Dec 25: 🎅🎨 This #merryCSSmas it's time to think outside the stylesheet! Harness any streams of data JavaScript is aware of for styling purposes by using CSS Variables computed by simple JS functions to add the power of reactive programming to your CSS. github.com/tomhodgins/com…

This year for the 3rd annual #merryCSSmas, I'm featuring 25 fun things you can do to transform valid custom CSS syntax into other things! Not everything will be practical, but it will show how fun working with 100% valid CSS syntax can be!

Day 13/25 😍 Use element queries via custom <link> tag attributes to toggle stylesheets with Slinky - plugin: github.com/tomhodgins/sli… - demo: tomhodgins.github.io/slinky/tests/d… #merryCSSmas #elementqueries #containerqueries #rwd #responsive

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

Day 8/25 🎁 Define height based on a ratio and the element's current width with the Aspect Ratio Mixin - plugin: github.com/tomhodgins/rep… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #responsive #aspectratio #iframe #css #webdev #wedbdesign #rwd

Dec 31: Scroll-Based Styles 📜🎨 Teach CSS how to use the current scroll position of the page, or elements on the page as values inside your styles. This can be used for building animations that respond to the user scrolling! code & demo: codepen.io/tomhodgins/pen… #merryCSSmas

Day 17/25 🎄 Use the scroll position of an element as values in CSS with Scrollery - plugin: github.com/tomhodgins/css… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #css #variables #cssvariables #rwd

Day 5/25 ❄ Customize the specificity of the CSS selectors you are writing with reSpec! - plugin: github.com/tomhodgins/res… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #css #custom #selector #specificity #frameworks #libraries

Day 11/25 ✨ Use DOM properties of elements as CSS variables for styling with Varsity - plugin: github.com/tomhodgins/css… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #css #variable #props #rwd #responsive

Day 24/25 😄 Do (almost) everything listed so far this month all in one plugin with EQCSS - plugin: elementqueries.com - demo: codepen.io/tomhodgins/pen… #merryCSSmas #eqcss #elementqueries #containerqueries #rwd

Day 25/25 🎅 Excited to finally release a new kind of HTML compiler I've been working on. It lets you write Container Queries and compile them down to native CSS media queries. - view on Github: github.com/tomhodgins/qom… #merryCSSmas #elementqueries #containerqueries #css #rwd

Day 14/25 🤶 Use XPath selectors to target elements with CSS styles with XPath Selector Mixin - plugin: github.com/tomhodgins/rep… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #xpath #selector #css #parent #ancestor

Day 20/25 💚 Select the element directly preceding another element with Prev Selector Mixin - plugin: github.com/tomhodgins/rep… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #css #prev #selector #jsincss

Day 12/25 🛍 Allow elements (like textarea or input) to expand to fit their content with Auto Expand Mixin - plugin: github.com/tomhodgins/rep… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #autoexpand #responsive #rwd

Day 21/25 🎁 A JavaScript plugin that adds support for a custom --aspect-ratio property in CSS with Aspecty - plugin: github.com/tomhodgins/css… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #aspectratio #css #rwd #responsive #webdesign

Day 6/25 🌟 Expose properties of DOM nodes via CSS variables with Varius to style based on an elements own width, height, characters, children, and scroll position! - plugin: github.com/tomhodgins/var… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #cssvariables #reactive #css #rwd

Day 7/25 🎅 Interpolate JavaScript ~anywhere~ inside CSS using ${} with this simple JS-in-CSS reprocessor! - plugin: gist.github.com/tomhodgins/b86… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #css #reprocessor #style #scoping #js #interpolation #jsincss

Day 4/25 🔔 Use the cursor's current position as values inside your CSS styles with Cursory - plugin: github.com/tomhodgins/css… - demo: codepen.io/tomhodgins/pen… #merryCSSmas #css #mouse #cursor #variable #interactive #reactive #animated #responsive

Day 19/25 ❄️ An experimental container queries plugin using ResizeObserver with RobServ - plugin& demo: codepen.io/tomhodgins/pen… #merryCSSmas #responsive #css #elementqueries #resizeObserver #containerqueries #rwd

Day 15/25 ☃️ Add JavaScript tests to CSS selectors to determine if a style should apply with Selectory - plugin: github.com/tomhodgins/css… - demo: codepen.io/tomhodgins/pen… - test ideas: codepen.io/tomhodgins/pos… #merryCSSmas #elementqueries #containerqueries #jsincss #selectors