PiccalilliMore Front-end Bloggersread at source
The Index: Issue #200
It's issue #200 of The Index! A real milestone that we should celebrate with a dedicated CSS links issue. Let's get stuck in to the good links . Multiple-column layout, rows, rules, and floats The Boss™ is here with some fantastic news on layout capabilities that we can use. They should really open the door to more creative layouts, which is great. Our CSS isn’t opinionated enough This really resonates as Craig is describing issues that inspired CUBE CSS . Semantic state changes are a really good way of doing things too. Controlling when CSS custom property values are computed Jake, the fountain of technical knowledge, is here with another must read. CSS scroll-triggered animations are here, and I completely missed them A very good guide on scroll-triggered animations with some sage advice on usage too. Not many better people to cover this than Cyd! Detect when elements overlap with CSS We're enjoying how Ahmad is covering stuff that will be tripping people up all the time in their jobs as front-end devs. It's great to see. A pragmatic guide to modern CSS colours - part one Here's one from the Piccalilli archives that you might have missed to wrap up this issue. P.S. this is a good website from personalsit.es . Sponsor message Mozilla Festival is co-built by developers and designers from around the world. Come gather, share, and connect with us in Barcelona, October 28-30. Last year, more than 2,000 people came together to unlearn old ways of building tech. This year, with eight tracks and a spot in Barcelona's Open Tech Week, MozFest gives your ideas room to run wild. Join us for three days of conversation and hands-on building. Get your badge
PiccalilliMore Front-end Bloggersread at source
The Index: Issue #199
Blurry before beautiful: image previews for the web A very good looking proposal! The root scroller and how not to lose it Yet another in-depth, fantastic article by Kilian at Polypane. fonts.xyz You know us by now: we see a good place to get fonts and we share it. This is a very nice offering with loads to choose from. “AI, make the website good” With these seismic changes, I will continue to make the argument that craft defined as caring about the quality of output (independent of the tools used to generate the output) is more important than ever . Caring about what you ship will always have real-world value to visitors/consumers/users real people . Well said, Zach! I spent three sweltering days shredding the high seas at jogging pace, and it ruled A long read but absolutely outstanding prose. It’s about time I tried to explain what progressive enhancement actually is Here's one from the Piccalilli archives that you might have missed to wrap up this issue. P.S. this is a good website . Sponsor message Mozilla Festival is co-built by developers and designers from around the world. Come gather, share, and connect with us in Barcelona, October 28-30. Last year, more than 2,000 people came together to unlearn old ways of building tech. This year, with eight tracks and a spot in Barcelona's Open Tech Week, MozFest gives your ideas room to run wild. Join us for three days of conversation and hands-on building. Get your badge
PiccalilliMore Front-end Bloggersread at source
Stop buttons triggering zoom when they’re double tapped
I stumbled across this great project by Barry Prendergast . It's a web-based radio player with a lush UI. On mobile I spotted that as I was rapidly flicking through the stations to find one that was on air, the browser was zooming in and out. Here's a screen clip: Watch the video . I thought this behaviour was related to their viewport meta tag setup, but they have that set up perfectly: Now, you could prevent the zooming by adding , maximum-scale=1.0, user-scalable=no to the content attribute, but don't do that because it prevents zooming at all, which is a WCAG violation . What's actually happening here is the browser is responding to the double tap gesture, which in the case of Safari on iOS, zooms into the button element I'm tapping. Luckily there's a CSS one-liner for us that gets the job done. .button { touch-action: manipulation; } As per MDN : Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for " pan-x pan-y pinch-zoom " (which, for compatibility, is itself still valid). Let's see it in action. First, here's a couple of buttons without touch-action . Try rapidly tapping on your phone/touch device: See the Pen Buttons without touch-action applied by Andy Bell ( @piccalilli ) on CodePen . This link has no CodePen framing to make that easier for you Here are the same buttons with touch-action applied: See the Pen Buttons with touch-action applied by Andy Bell ( @piccalilli ) on CodePen . Again, here's a frameless version for you Handy!
PiccalilliMore Front-end Bloggersread at source
The Index: Issue #198
You’ll miss publishers when they’re gone Yet again , the industry has been let down by DigitalOcean and their abandonment of CSS-Tricks. It's time to step up and protect publishers whose goal is simply, to educate and share knowledge. It’s official: Airline websites are slow, but they don’t have to be The great folks at Calibre just don't miss. Another great deep-dive. Gigs worth leaving the house for Nothing sounds good is a great service and they've expanded with this immense resource for finding gigs near you. BBC News RSS Feeds (that don't suck!) BBC News get a lot wrong, including their RSS feeds, so Dan has fixed that part at least. Snail racing simulator This is just delightful. A highly configurable switch component using modern CSS techniques Here's one from the Piccalilli archives that you might have missed to wrap up this issue. P.S. this is a good website from personalsit.es . Sponsor message Our huge 35% discount on all courses ends on Tuesday . Use the coupon code PRICEFALL at checkout. Don’t miss out! Save 35% on courses
PiccalilliMore Front-end Bloggersread at source
A decent custom checkbox pattern for until ::checkmark is ready
Now that we can better customise elements, it's only natural to side-eye other form types that have caused us visual headaches. Sure, we should be applying the lightest of touches to form elements, especially, but even with a bit of visual-massaging, checkboxes are limited, aside from a bit of accent-color . See the Pen Standard checkbox with accent colour by Andy Bell ( @piccalilli ) on CodePen . There is a brighter future incoming, if you're to read the spec : The ::checkmark pseudo-element represents an indicator of whether the item is checked, and is present on checkboxes, radios, and option elements. — W3C forms level 1 Match that with appearance: base , which is also incoming, and we're looking at this sort of CSS: input[type="checkbox"] { appearance: base; } input[type="checkbox"]::checkmark { content: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12l5 5L20 7' /%3E %3C/svg%3E"); } We're miles off from that capability yet — it doesn't look like any browser is working on it — so allow me to show you how to build a nice custom checkbox pattern for until we have the browser capabilities we're after. HTML first, always It's always right to start with some good quality markup: A long label for this checkbox to make sure we get a nice wrapping behaviour The markup is pretty straightforward here. Inside the parent — which is linked to the input both by being a parent and the for / id attributes — we have a container for the input and icon, along with a text label. The reason I'm using elements here is because aside from the input/SVG only phrasing content is permitted. I don't think a would do any harm here, but it's best to do things right. On the SVG checkmark element, there's an aria-hidden="true" attribute. This stops the SVG — a visual element — getting in the way for assistive technology. I've also added focusable="false" . This is actually a relic from the Internet Explorer days hell, but I keep it on visual only icons, just in case. Right, we're in good shape. Let's make it look good. Some CSS The first thing to do is layout: .checkbox { display: flex; align-items: baseline; gap: 1em; text-wrap: balance; } Flex is more than capable here. I like to align on the baseline in this sort of context because as the viewport gets small and the text wraps, we don't want a vertically centered layout. It looks rubbish! Speaking of balance, I'm using text-wrap: balance here for the same compressed viewport context and dealing with wrapping text. Keeping a consistent edge (rag) is extra important for small microcopy, such as labels. Let's tackle the input itself. .checkbox input { margin: 0; width: 100%; height: 100%; appearance: none; position: absolute; top: 0; left: 0; border-radius: 0.2em; /* This is so the focus ring has a matching radius to the visual box */ } We've got to be really careful here because we don't want to mess up the focusability of our element. Combining appearance: none and absolute positioning, our element is still there, but its no longer in the way, visually . It can still receive focus and will present a focus ring, which is exactly what we need! Let's tackle the "box" part, which is also this 's parent. .checkbox__box { position: relative; background: transparent; color: currentcolor; border: 1px solid; width: 1.4em; height: 1.4em; transform: translateY(0.75ex); flex-shrink: 0; border-radius: 0.2em; } A lot of this is self explanatory but I'll pick up the key parts: I'm using position: relative so the stays inside this box The transform rule is a bit of a magic-number but because it's a relative ex unit , it scales quite nicely, regardless of parent font size. Most importantly the ex enhances that baseline alignment and fixes the initial alignment of the I really like how Ahmad Shadeed approaches this too. That's the beauty of CSS: there's plenty of ways to do things well! Let's deal with the SVG checkmark next: .checkbox__box svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; display: none; width: 1em; height: 1em; } I guess I could use logical properties here, but we're positioning an icon in a box, so the "old" way works perfectly well. The idea here is to visually hide the checkmark when the checkbox isn't checked and show it when it is. We'll deal with that CSS next. FYI This is a situation that very few people will likely find themselves in. What I'd recommend is having a couple of SVG elements that get toggled in that context. .checkbox__box:has(input:checked) { background: white; } .checkbox__box input:checked + svg { display: block; } We're in checked state territory here. I'm setting a white background using :has() which is yet another useful use-case for this endlessly handy addition to CSS. The following block of CSS uses a traditional next sibling selector to show the SVG element when the input is checked. You could use :has() here too, if you're feeling fancy. With all of that CSS in place, we're looking good. See the Pen Custom checkbox by Andy Bell ( @piccalilli ) on CodePen . This approach could also work for radio buttons There's nothing stopping you using this approach for radio buttons. Check out this demo where I'm using a circle icon instead of a checkmark. It works well! See the Pen Custom radio buttons by Andy Bell ( @piccalilli ) on CodePen . The em units usage allows this whole component to scale The eagle eyed amongst us will have noticed that aside from the transform rules, I've consistently use em units. The reason for this is so our checkbox can scale with no other intervention. See the Pen Custom checkbox - massive edition by Andy Bell ( @piccalilli ) on CodePen . The only change here, versus the first demo is a font-size declaration on the .checkbox component. A handy pattern, right? A big thanks to Jake Archibald and Heydon Pickering for checking my homework.