Customise radio buttons without compromising accessibility

Here’s a nifty post by Chen Hui Jing where she walks us through her process for making radio buttons accessible via keyboard. I particularly enjoyed this bit where she discusses the four options that are available to us to hide the radio input and replace them with a selection of cards that act like toggles instead: Most of us mess up the keyboard navigation portion of things when we hide the input element. There are several ways to make something invisible or hidden: clip-path: polygon(0 0) display: none opacity: 0 visibility: hidden For custom radios (or checkboxes), option 2 and 4 are not recommended because screen readers won’t be able… Read More

Continue Reading

“Killing the URL”

It was Safari who first started hiding the complete URL. Here’s what CSS-Tricks looks like even when you’re on an article page by default in Safari: The full URL path is hidden. You can only fix it (YES, FIX IT) by checking « Show full website address » in settings. Preferences > Advanced We’ve already damaged the sanctity of URLs in a way with URL shorteners. Thankfully, those are used less and less with social networks, like Twitter, not counting the URL toward the total tweet character count anymore. Now, Lily Hay Newman reports Chrome sees problems as well: « People have a really hard time understanding URLs, » says Adrienne Porter Felt, Chrome’s… Read More

Continue Reading

Shadow DOM in Ionic

Mike Hartington glows about how good and useful the Shadow DOM is: [Shadow DOM is] actually built on two simple ideas, isolation and location. Need to create a bit of DOM that is isolated from the global scope? Shadow DOM is here to help. Need to specify the exact location of a piece of DOM? Shadow DOMs scope API is what you need! It can be helpful to think of components that use Shadow DOM as modules for HTML. Markup and styles are isolated to their own DOM tree, and removed from the global context. Last time we talked about it around here, I showed how Twitter is using it… Read More

Continue Reading

Working With Events in React

Most of the behavior in an application revolves around events. User enters a value in the registration form? Event. User hits the submit button? Another event. Events are triggered a number of ways and we build applications to listen for them in order to do something else in response. You may already be super comfortable working with events based on your existing JavaScript experience. However, React has a distinct way of handling them. Rather than directly targeting DOM events, React wraps them in their own event wrapper. But we’ll get into that. Let’s go over how to create, add and listen for events in React. Creating Events We’ll start by… Read More

Continue Reading

Using Scoped Slots in Vue.js to Abstract Functionality

Let’s start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots. For example, you want to create a wrapper component that is styled in a specific way but you want to be able to pass any content to be rendered inside that wrapper (it might be a string, a computed value, or even another component). There are three types of slots: default / unnamed slots: used when you have a single slot in a component. We create them by adding in the template where we… Read More

Continue Reading

Aspect Ratio Media Elements and intrinsicsize

If you need an aspect-ratio sized (or any element that can have children), you can do it. Perhaps the cleanest way is a custom-property-sized pseudo-element that pushes the correct minimum height through padding-based-on-width. But media elements like don’t have children. The tag isn’t self-closing, but when it is supported (almost always), the content of it is replaced with a shadow DOM you don’t control. Besides, these are the only two elements that « size to an external resource. » So, how do you enforce aspect ratio on them when using a variable width like 100% or 75vw? Well, once they load, they will have their natural aspect ratio, so that’s nice. But… Read More

Continue Reading

HTML elements, unite! The Voltron-like powers of combining elements.

Guides, resources and discussions about Semantic HTML are often focused around specific elements, like a heading, or a sectioning element, or a list. It’s not often that we talk specifically about how we can combine HTML elements to increase their effectiveness. Normally, when we introduce HTML, we talk about how it is used to apply meaning to content in a document, and we do this by using examples like: « Is it a paragraph? » « Is it a heading? » « Is it a numbered list » « Is it a button » We use these examples because they are easy to understand — it’s a single piece or chunk of the same content that needs to… Read More

Continue Reading

Updating a CSS Variable with JavaScript

Here’s a CSS variable (formally called a « CSS custom property« ): :root { –mouse-x: 0px; –mouse-y: 0px; } Perhaps you use them to set a position: .mover { left: var(–mouse-x); top: var(–mouse-y); } To update those values from JavaScript, you’d: let root = document.documentElement; root.addEventListener(« mousemove », e => { root.style.setProperty(‘–mouse-x’, e.clientX + « px »); root.style.setProperty(‘–mouse-y’, e.clientY + « px »); }); That’s all. See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen. The post Updating a CSS Variable with JavaScript appeared first on CSS-Tricks.

Continue Reading

Render Caching for React

Server Side Rendering (SSR) is a very useful technique that makes web apps appear faster. The initial HTML is displayed before the JavaScript is parsed and, while the user is deciding what to tap on, our handlers are ready. Server side rendering in React requires additional work to setup and has server costs. Furthermore, if your server team cannot have JavaScript running on your servers, you are stuck. It significantly complicates the CDN setup especially if you have pages that require login and where the user’s information is managed. I want to walk through a new concept called Render Caching. This is a cool trick that can give users an… Read More

Continue Reading

Props and PropTypes in React

React encourages developers to build by breaking a UI up into components. This means there will always be a need to pass data from one component to another — more specifically, from parent to child component — since we’re stitching them together and they rely on one another. React calls the data passed between components props and we’re going to look into those in great detail. And, since we’re talking about props, any post on the topic would be incomplete without looking at PropTypes because they ensure that components are passing the right data needed for the job. With that, let’s unpack these essential but loaded terms together. Props: The… Read More

Continue Reading

CSS Shape Editors

Firefox 62 is shipping out of beta on September 5th. The big notable thing for CSS developers is that it will now support the shape-outside property with polygon(), circle(), and ellipse(), joining Chrome and Safari. What will be nice about the Firefox release (well, it’s kinda already nice if you use something like Firefox Developer Edition which is already on 62), is that it has a shape editor built right into DevTools. Chrome supports shape-outside as well, but there is no native DevTools helper for working with them. Thankfully, Razvan Caliman has a Chrome Plugin that does a great job. (Razvan contributed to the Firefox version as well, I hear.)… Read More

Continue Reading

“View Source” in DevTools

When the conversation about the value of « View Source » rolls around, the #1 response I hear is along these lines: No way, Jose! I use View Source all the time! It’s very useful when you want to look at the raw HTML, not the DOM. Yes, that is useful, and yes, there is a difference. But just because you are looking at DevTools doesn’t mean the DOM is the only thing you can see. This is Chrome DevTools. Safari has a Resources tab There is also a Network tab in DevTools for every browser. That’s where you find a way to look at the document. Firefox’s Network tab So, if… Read More

Continue Reading

Helping a Beginner Understand Getting a Website Live

I got a great email from a fellow named Josh Long the other day. He is, in his words, « relatively new to web design » and was a bit stuck on the concept of getting a site live. I should say that I’m happy to get emails like this an I always read them, but I typically can’t offer tech support over email. If I can respond at all, I normally point people to other community resources. In this case, it struck me what a perfect moment this is for Josh. He’s a little confused, but he knows enough to be asking a lot of questions and sorting through all this… Read More

Continue Reading

What do we call browser’s native development tools?

You know, that panel of tools that allows you to do stuff like inspect the DOM and see network requests. How do the companies that make them refer to them? Chrome calls them DevTools. Edge calls them DevTools. Firefox calls them Developer Tools. Safari calls it the Web Inspector. I think it’s somewhat safe to generically refer to them as DevTools. Safari is the only browser that doesn’t use that term, but I imagine even die-hard Safari users will know what you mean. The post What do we call browser’s native development tools? appeared first on CSS-Tricks.

Continue Reading

Designing With Code

Wall Street Journal design director Matthew Ström on something near and dear to me: the link between code and design tools: We’re in the middle of a design tool renaissance. In the 8 years since Sketch 1.0 was released, there’s been a wave of competition among traditional design tools. And as the number of tools available to designers grows exponentially, ideas that were once considered fringe are finding a broader audience. One of these ideas will significantly change the way digital products are designed: integrating design and code at a deep level. Figma can update a React code base in real time; InVision, Abstract, and Zeplin have done away with… Read More

Continue Reading

The Complete CSS Demo for OpenType Features

I’m very glad a guide for these features exists because we already know there are so many weird things that variable fonts can do — well done, Tunghsiao Liu! There are quite a few possible values for font-feature-settings, like, ya know: aalt, swsh, cswh, calt, hist, hlig, locl, rand, nalt, cv01-cv99, salt, subs, sups, titl, rvrn, liga, dlig, size, ornm, ccmp, kern, mark, mkmk, smcp, c2sc, pcap, c2pc, unic, cpsp, case, ital, ordn, lnum, onum, pnum, tnum, frac, afrc, dnom, numr, sinf, zero, mgrk, flac, dtls, ssty, ss01-ss20, smpl, trad, tnam, expt, hojo, nlck, jp78, jp83, jp90, jp04, hngl, ljmo, tjmo, vjmo, fwid, hwid, halt, twid, qwid, pwid, palt, pkna,… Read More

Continue Reading