CSS Logical Properties and Values, the next Step of CSS Evolution

Still in draft, yet already thoroughly supported, is the CSS Logical Properties and Values Level 1 Specification, a CSS module which gets me excited. CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings. …

Logical Operations with CSS Variables CSS Custom Properties

Going beyond Binary Conditions for CSS Calculations, Ana Tudor takes it to a whole new level by introducing the logical operations (and, or, nand, nor, not, and xor) to CSS — all built on top of calc() Very often, while using switch variables, I wish I could perform logical operations on them. We don’t have …

text-decoration-* CSS Properties Coming to Firefox

Glad to see this announcement by Mozillian Daniel Holbert: As of today (Sept 12 2019), I’ve turned on support for the CSS properties text-decoration-skip-ink, text-decoration-thickness, and text-underline-offset, on all platforms. As posted before, text-decoration-skip-ink gives you nicer underlines. The other two properties allow one to tweak the position and color of the underline. CSS Tricks …

“Can I email…” – Support tables for HTML and CSS in emails

Can I email is like Can I use but specifically for email: which HTML and CSS features are supported by which mail client? They also provide a scoreboard, ranking mail clients based on their support among the 70 HTML and CSS features listed on Can I email. Can I email… Support tables for HTML and …

RE: Overengineered packages?

ℹ️ This is a reply to Johan Ronsse’s post “Overengineered Packages?”. Be sure to read it first. After having posted about the class-names package, Johan turned to Twitter to state that the package overengineered. In a follow-up blogpost he argues that: At the moment I feel like it’s only invented because of a deeper problem: …

class-names – Conditionally join CSS class names together

One of the packages I’ve been using a lot is classnames, a simple JavaScript utility for conditionally joining classNames together. Recently I stumbled upon @sindresorhus/class-names, a likewise package whose usage is very similar. import classNames from '@sindresorhus/class-names'; // Think of these like props of your React component … const props = { type: 'success', small: …

Old Typewriter Text Effect

By randomly changing the opacity and adding a little text-shadow, one can create this old typewriter effect: Makes good use of currentColor for the shadow, so it can be applied on any coloured text. Old Typewriter Text Effect → 💁‍♂️ Don’t confuse this effect with a typing carousel which types the letters one-by-one.