Accessible Forms with Pseudo Classes
CSS-Tricks
by Chris DeMars
4d ago
Hey all you wonderful developers out there! In this post, I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within. The :focus-within class allows for great control over focus and letting your user know this is exactly where they are in the experience. Before we jump in, let’s get to the core of what web accessibility is. Form Accessibility? You have most likely heard the term “accessibility” everywhere or the numeronym, a11y. What does it mean? That is a great question with so many answers. When we look at the p ..read more
Visit website
Passkeys: What the Heck and Why?
CSS-Tricks
by Neal Fennimore
1y ago
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C TPAC 2022, gained support in Safari 16, are finding their way into macOS and iOS, and are slated to be the future for password managers like 1Password. They are already supported in Android, and will soon find their way into Chrome OS and Windows in future releases. Geeky OS security enhancements don’t exactly make big headlines in the front-end community, but it stands to reason that passkeys are going to be a “thing”. And considering how passwords and ..read more
Visit website
Some Cross-Browser DevTools Features You Might Not Know
CSS-Tricks
by Pankaj Parashar
1y ago
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes I even bounce between them, especially when I’m debugging cross-browser issues. DevTools is a lot like browsers themselves — not all of the features in one browser’s DevTools will be the same or supported in another browser’s DevTools. But there are quite a few DevTools features that are interoperable, even some lesser-known ones that I’m about to share with you. For the sake of brevity, I use “Chromium” to refer to all Chromium-based browsers, like Chrome, Edge, and Opera, in the article. Many of the DevTools in them offer ..read more
Visit website
5 Mistakes I Made When Starting My First React Project
CSS-Tricks
by Richard Oliver Bray
1y ago
You know what it’s like to pick up a new language or framework. Sometimes there’s great documentation to help you find your way through it. But even the best documentation doesn’t cover absolutely everything. And when you work with something that’s new, you’re bound to find a problem that doesn’t have a written solution. That’s how it was for me the first time I created a React project — and React is one of those frameworks with remarkable documentation, especially now with the beta docs. But I still struggled my way through. It’s been quite a while since that project, but the lessons I gained ..read more
Visit website
Creating a Clock with the New CSS sin() and cos() Trigonometry Functions
CSS-Tricks
by Mads Stoumann
1y ago
CSS trigonometry functions are here! Well, they are if you’re using the latest versions of Firefox and Safari, that is. Having this sort of mathematical power in CSS opens up a whole bunch of possibilities. In this tutorial, I thought we’d dip our toes in the water to get a feel for a couple of the newer functions: sin() and cos(). There are other trigonometry functions in the pipeline — including tan() — so why focus just on sin() and cos()? They happen to be perfect for the idea I have in mind, which is to place text along the edge of a circle. That’s been covered here on CSS-Tricks when Chr ..read more
Visit website
Managing Fonts in WordPress Block Themes
CSS-Tricks
by Ganesh Dahal
1y ago
Fonts are a defining characteristic of the design of any site. That includes WordPress themes, where it’s common for theme developers to integrate a service like Google Fonts into the WordPress Customizer settings for a “classic” PHP-based theme. That hasn’t quite been the case for WordPress block themes. While integrating Google Fonts into classic themes is well-documented, there’s nothing currently available for block themes in the WordPress Theme Handbook. That’s what we’re going to look at in this article. Block themes can indeed use Google Fonts, but the process for registering them is wa ..read more
Visit website
Everything You Need to Know About the Gap After the List Marker
CSS-Tricks
by Šime Vidas
1y ago
I was reading “Creative List Styling” on Google’s web.dev blog and noticed something odd in one of the code examples in the ::marker section of the article. The built-in list markers are bullets, ordinal numbers, and letters. The ::marker pseudo-element allows us to style these markers or replace them with a custom character or image. ::marker { content: url('/marker.svg') ' '; } The example that caught my attention uses an SVG icon as a custom marker for the list items. But there’s also a single space character (" ") in the CSS value next to the url() function. The purpose of this space s ..read more
Visit website
An Approach to Lazy Loading Custom Elements
CSS-Tricks
by Frederik Dohr
1y ago
We’re fans of Custom Elements around here. Their design makes them particularly amenable to lazy loading, which can be a boon for performance. Inspired by a colleague’s experiments, I recently set about writing a simple auto-loader: Whenever a custom element appears in the DOM, we wanna load the corresponding implementation if it’s not available yet. The browser then takes care of upgrading such elements from there on out. Chances are you won’t actually need all this; there’s usually a simpler approach. Used deliberately, the techniques shown here might still be a useful addition to your tools ..read more
Visit website
Different Ways to Get CSS Gradient Shadows
CSS-Tricks
by Temani Afif
1y ago
It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does this (believe me, I’ve looked) and any blog post you find about it is basically a lot of CSS tricks to approximate a gradient. We’ll actually cover some of those as we go. But first… another article about gradient shadows? Really? Yes, this is yet another post on the topic, but it is different. Together, we’re going to push the limits to get a solution that covers something I haven’t seen anywhere else: transparency. Most of the tricks w ..read more
Visit website
Healthcare, Selling Lemons, and the Price of Developer Experience
CSS-Tricks
by Geoff Graham
1y ago
Every now and then, a one blog post is published and it spurs a reaction or response in others that are, in turn, published as blogs posts, and a theme starts to emerge. That’s what happened this past week and the theme developed around the cost of JavaScript frameworks — a cost that, in this case, reveals just how darn important it is to use JavaScript responsibly. Eric Bailey: Modern Health, frameworks, performance, and harm This is where the story begins. Eric goes to a health service provider website to book an appointment and gets… a blank screen. In addition to a terrifying amount ..read more
Visit website

Follow CSS-Tricks on FeedSpot

Continue with Google
Continue with Apple
OR