A rather geeky/technical weblog, est. 2001, by Bramus
object-view-box PropertyAhmad Shadeed dives into the new object-view-box property, a side-invention to the aforementioned Page Transitions API: The object-view-box property specifies a “view box” over an element, similar to the <svg viewBox> attribute, zooming or panning over the element’s contents. Like so: img { aspect-ratio: 1; width: 300px; object-view-box: inset(25% 20% 15% 0%); } Available now …
Continue reading “First Look At The CSS object-view-box Property”
At this year’s Google I/O, Jake presented the revised version of the Transition API: Native apps often feature transitions between states that both look great and help communicate the type of navigation to the user. The bad news: creating transitions between pages on the web is impossible. In-page transitions are possible, but complex. The good …
Will Boyd: Let’s talk about the various ways we can control how text wraps (or doesn’t wrap) on a web page. CSS gives us a lot of tools to make sure our text flows the way we want it to, but we’ll also cover some tricks using HTML and special characters. Contains a ton of …
Continue reading “Deep Dive into Text Wrapping and Word Breaking”
Yesterday I attended the April 2022 “Full Stack Ghent” Meetup, at the offices of In The Pocket. The evening consisted of 8 lightning talks. Being part of the speaker line-up, I kicked off the meetup with a talk titled “The C in CSS”. CSS is short for “Cascading Style Sheets”. But what exactly is this …
Continue reading “The C in CSS (2022.04.20 @ Full Stack Ghent)”
Late last week, I was very delighted to see that Chromium will start prototyping with CSS Toggles, a proposal currently only available as an Unofficial Draft, authored by Tab Atkins and Miriam Suzanne (who else?!). CSS toggles are a mechanism for associating toggleable state with a DOM element. This state can be defined and connected …
<selectmenu>, a Fully Style-able <select> ElementOver at CSS-Tricks, Patrick Brosset dug into <selectmenu>, the customizable <select> we always wanted. The new experimental <selectmenu> control offers a lot of flexibility when it comes to styling and even extending a traditional <select>. And it does this in all the right ways, because it’s built into the browser where accessibility and viewport-aware positioning …
Continue reading “Say Hello to <selectmenu>, a Fully Style-able <select> Element”
@bramus/specificity v2Back in February I created @bramus/specificity, an NPM package to calculate the Specificity of CSS Selectors. As that version was more of a thought experiment/POC, there was a lot of room for improvement. Yesterday, after 11 betas, version 2.0.0 of @bramus/specificity was released. Let’s take a look … Quick Example To give you an idea …
In this CSS Café talk, Josh W. Comeau digs into several Layout Modes and a few common misunderstandings about CSS (such as Stacking Contexts) Also see the Understanding Layout Algorithms post Josh recently published.
color-contrast() – Target Contrast Ratio DemoNice demo by Daniel Yuschick, showing how color-contrast() does its thing. Using the controls you can change the target contrast using a keyword or a custom value. Good use of Custom Properties there as well! 👨🔬 To check this demo you’ll need Safari Technology Preview 122+ with the CSS color-contrast() Experimental Feature enabled.
Matthew Philips made something odd-looking: a JavaScript framework that lets you add DOM bindings using a CSS-like syntax. Say your framework of choice generates this markup: <div class="counter"> <button type="button" class="increment">Increment</button> <button type="button" class="decrement" disabled>Decrement</button> <div class="result"> Count: <strong class="count">0</strong> </div> </div> Using Corset, you can then add behavior as follows: import sheet, { mount …