A rather geeky/technical weblog, est. 2001, by Bramus
gap property
The gap property for Flexbox about to land in Chromium 85. It allows you to define the size of the gutters between Grid/Flexbox children. CSS Grid brought a delightful spacing feature called grid-gap, which quickly became a popular way to put space into layouts. It was easy to fall in love with because it took …
Continue reading “Spacing grid/flexbox items in CSS with the gap property”
Nice pen by Aaron Iker: It combines CSS Custom Properties, CSS Transitions, and SVG Animations using stroke-dashoffset/stroke-dasharray. The reason that it works with text that spans multiple lines is because of the (inline) span that’s being used inside the link.
To use Tailwind – or any prebuilt CSS library/framework for that matter – in a React app you can simply import its generated CSS file and use the classes it exposes: import ‘../tailwind.generated.css’; // … const Alert = ({ title = '', message }) => ( <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" …
Continue reading “Use Tailwind classes within any CSS-in-JS library with Twin”
The Facebook Engineering Team on how they’ve built the new Facebook.com – a version which I’ve been able to try for nearly two months by now. Throughout the process, we anchored our work around two technical mantras: As little as possible, as early as possible. We should deliver only the resources we need, and we …
Continue reading “Rebuilding our tech stack for the new Facebook.com”
Great find by Stefan Judis: Today I learned that the content property supports a way to define alternative text for generated content. You can specify the alternative content after a /: .new::before { content: url(./img/star.png) / "New!"; } Here’s how that works with screen readers: .new-item::before { /* "black star" and element content is read …
Continue reading “Alternative text for CSS generated content”
min(), max(), clamp() in CSS
Ahmad takes a look into the CSS min(), max(), and clamp() functions. As with all his articles, he also provides some practical use cases and examples. Regarding the clamping of the font-size of a page, you don’t really need clamp(): This is how to accessibly set a viewport relative scaling `font-size` with a min AND …
Continue reading “Everything I Learned About min(), max(), clamp() in CSS”
100vh in Safari on iOS
Update 2021.07.08: There are new viewport units on the way that will finally solve this issue. 100dvh is the one you’re looking for. When working with Viewport Units there’s this longstanding and extremely annoying bug in Safari on iOS where it does not play nice with the vh unit. Setting a container to 100vh for …
UPDATE 2020.10.22: Masonry Layout founds its home in the CSS Grid Module Level 3 Draft Spec! A long requested CSS feature is to be able to create a “Masonry Layout” using pure CSS. Today we can already create a Masonry-like layout using grid-auto-flow: dense;, but unfortunately that’s not the real deal. 🤔 Masonry Layout? Masonry …
Continue reading “CSS Grid Layout Module Level 2: Masonry Layout”
Fun pen by Jakob Eriksen in which he combines Emoji and CSS Custom Properties to create an Emoji Customizer. The reason that this works is because of the fact that emoji can have modifiers. Skin Tone and Hair, as used in the demo above, are such modifiers. Using the ZWJ (“\u200d”) you can glue all …
Continue reading “Emoji Customizer created with CSS Variables”
The CSS Color Module Level 4 spec introduces a new way to define colors in CSS: Space-Separated Functional Color Notations. Start using them today!