@ function is an absolutely incredible raw gemstone. It just needs some serious polish and tumbling- nothing newly added to the CSS spec these days should be allowed to add this many unexpected caveats to the language. Args need to spread by default like standard. Registration needs consistency. Etc

100% CSS repeat() function codepen.io/propjockey/p... Repeat anything, strings, sets of animation properties to help manage parallel array properties, calc() partials, polygon partials, shape partials, text-shadows, anything!

breakpoint-system SPACE TOGGLE EXPANSION Matches the full library reach, use it anywhere (as far back as May 2023 on Safari 16.5)! The docs for them are a good read for anyone, especially if you're interested in authoring CSS libraries yourself! propjockey.breakpoint-system.com#docs-space-t...

CSS tip: If you code your library's class name like so: [class*="breakpoint-system"] Your users can extend the functionality like so: .my-element--breakpoint-system { /* override default settings */ } Author Experience improvement: SEEING the dependency of their class name.

I am not overstating how impactful this will be for both designers and developers. It removes a litany of considerations and burdens on both sides, in the hand-off, AND delivers to your audience the best, most accessible, UX that any responsive solution has ever achieved. dev.to/janeori/css-...

Another brand new way to do responsive design. New accessibility solutions to long standing problems solved in the background. Customizable breakpoints. Customizable query aliases. Design with pixels, build with equiv breakpoint units, 1:1 fluid delivery. propjockey.breakpoint-system.com 100% CSS

css-peeps.com I still love this.

CSS wishlist item: Animation tainting on --vars exists to prevent cycles between animations. If I'm inheriting the value of a tainted var, there's no reason (as far as I can tell) to also inherit the tainting state. Taint shouldn't spread. codepen.io/propjockey/p...

This city is built with CSS. No SVG. No images. No HTML. Just gradients... and a bit of patience. codepen.io/alvaromontor... I haven't touched this in a while, but it still holds up. I'd love to expand it into a full city someday. #css #cssart #webdev

I still can’t believe this is all CSS and a couple of divs in the browser. And that it runs so smooth on my phone. I just love the top view - including that transition. And the way those fireballs just come hurdling towards you.

You can get the OS scrollbar gutter width as an integer in a --CSS-var on :root codepen.io/propjockey/p... (to have a gutter at all you'll have to, on mac, turn on scrollbars to "always", etc, and refresh to ever see it non-zero) But it's bugged in Safari: bugs.webkit.org/show_bug.cgi...

I had fun doing something that normally feels like a grind because every little idea I had was fulfilled quickly by AI and a bit of tweaking to learn and make it juuuust right It's not CSS but it's got style 🤙💚 dev.to/janeori/cust...

CSS vars holding arrays should've expanded into multiple parameters for --function calls. Especially because there's a syntax to prevent it. What a bummer! jsfiddle.net/wdmnockj/1/ github.com/w3c/csswg-dr... issues.chromium.org/issues/39020... drafts.csswg.org/css-values-5....

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS lyra.horse/x86css/

Responsive CSS shapes are coming drafts.csswg.org/css-shapes-2... Implemented in Chrome Canary & Safari Technology Preview Blog post etc. soon

Data Exfiltration is my 2nd best CTF category so I really enjoyed scripting this within the limits of CSS. Check it out while you're getting your work week started: dev.to/janeori/100-...

Living up to the PropJockey slogan here! :) "the value of properties, orchestrated" Watch this new advanced CSS exfiltration hack execute live (in Chrome) in the embedded CodePen demo @ the bottom of the article! 16 times more data from a single SVG fetch than the prev hack! dev.to/janeori/100-...

5 minutes with this text-box syntax and feature explorer is all you need to ramp up! nerdy.dev/notebook/tex...

:checked { --👽: ; } :not(:checked) { --👽: initial; }

Forgot to document one of the properties from the library I released at 1 am so I've updated the article - including an additional CodePen demo! 👽💚 dev.to/janeori/100-...

Released a new 100% CSS utility library: github.com/propjockey/f... Read all about it here! dev.to/janeori/100-... I might do a followup article on *how* it works if there's curiosity 💚👽

Want to know exactly how the CSS GETting your IP Address thing works? I wrote an explainer, lots of narrative exposition but easy enough to skip to each of the CodePen examples to learn exactly *HOW* it works. Plus... it ends with a teaser of what comes next! 👽💚 dev.to/janeori/gett...

Released a new CSS library: github.com/propjockey/c... It lets you use counter() vars in calc() without JavaScript. Plus allows you to calc() to children count globally or locally like counter() does - no localized limitations like :nth-* selectors have. codepen.io/propjockey/p... Plenty of fun!

🤔 If you're building a CSS library, you could easily give your dev users an option on *where* to use your library. Default to putting everything on :root unless their HTML directs confinement :root:not(:has(.my-library-root)), .my-library-root { --bunch-of-library-vars: here; }

Aaaaand v2, Chrome only. Code shrank 90% thanks to @kizu.dev mentioning it might be possible, @css-only.dev showing it is possible, and @bram.us for the tools and articles on scroll timeline stuff so I could give myself a crash course. The html is only one single line. codepen.io/propjockey/p...

And here it is again Cross-Browser with a fraction of the setup. The first demo was primarily showing a hack for data being computed with several layers of dom then being lifted back to :root. I released an update including the mini version CSS GETing your IP Address :) codepen.io/propjockey/p...

Released a new CSS library: github.com/propjockey/c... here's a demo of what can be done in CSS WITHOUT JavaScript: codepen.io/propjockey/p... Told you there was plenty of cool stuff to explore :)

💡 CSS Tip! One line of code that looks strange and confusing. You may think it's not even CSS but it will save you many times in the future! It will make sure the width of your element is always an integer! No more decimal and rounding issues! 👉 css-tip.com/pixel-roundi... #CSS

It's been over a year since I posted the tan(atan2()) article; I've been busy at a new job but hope to create new ideas again soon. :) Plenty of cool stuff to explore in CSS! That article just passed 9000 reads; dev.to/janeori/css-... If CSS article stats is of interest, here's some of mine

Bottom of a circular CSS Radial Gradient touching the top two corners and dripping in a specific, customizable distance: codepen.io/propjockey/p...

Recent technical CSS blog, The CPU Hack, with an extra fun demo at the bottom 👀🏓🎮 dev.to/janeori/expe...