Search

Nalezeno "Markup": 202

ARIA in CSS


Jeremey reacting to Sara’s tweet, about using [aria-*] selectors instead of classes when the styling you are applying is directly related to the ARIA state. … this is my preferred way of hooking up CSS and JavaScript interactions. Here’s [an] old CodePen where you can see...

How to Animate the Details Element Using WAAPI


Animating accordions in JavaScript has been one of the most asked animations on websites. Fun fact: jQuery’s slideDown() function was already available in the first version in 2011. In this article, we will see how you can animate the native <details> element using the Web Animations...

This page is a truly naked, brutalist html quine.


Here’s a fun page coming from secretGeek.net. You don’t normally think “fun” with brutalist minimalism but the CSS trickery that makes it work on this page is certainly that. The HTML is literally displayed on the page as tags. So, in a sense, the HTML is both the page...

GIFS and prefers-reduced-motion


The <picture> element has a trick it can do where it shows different image formats in different situations. If all you are interested in is formats for the sake of performance, maybe you’d do: <picture<source srcset="img/waterfall.avif" type="image/avif"<source...

Smarter Ways to Generate a Deep Nested HTML Structure


Let’s say we want to have the following HTML structure: <div class='boo'<div class='boo'<div class='boo'<div class='boo'<div class='boo'</div</div</div</div</div That’s real a pain to write manually. And the reason why this post was born was being...

How to Prevent Pasting into an Input


Every once in a while I get to a website that doesn’t allow me to paste into a form input. In most cases it’s something to do with login credentials (username and or password) and auth codes. So how are they preventing me from pasting information? It’s as easy as you’d...

Full Bleed


We’ve covered techniques before for when you want a full-width element within a constrained-width column, like an edge-to-edge image within a narrower column of text. There are loads of techniques. Perhaps my favorite is this little utility class: .full-width { width: 100vw; position:...

Netlify Edge Handlers


Some very cool news from Netlify: Edge Handlers are in Early Access (request it here). I think these couple of lines of code do a great job in explaining what an Edge Handler is: export function onRequest(event) { console.log(`Incoming request for ${event.request.url}`); ...

How to Detect When a Sticky Element Gets Pinned


The need for position: sticky was around for years before it was implemented natively, and I can boast that I implemented it with JavaScript and scroll events for ages. Eventually we got position: sticky, and it works well from a visual perspective, but I wondered how can we determine when...

Web Technologies and Syntax


JavaScript has a (newish) feature called optional chaining. Say I have code like: const name = Data.person.name; If person happens to not exist on Data, I’m going to get a hard, show-stopping error. With optional chaining, I can write: const name = Data.person?.name; Now if person...

Remove the Search Input Clear(x) Icon


I really appreciate the amount of different <input> elements we’ve received over the past decade. These elements don’t just bring a new semantic advantage, but also provide UI helpers, which in many cases are useful. In a recent case, I found a UI element not useful: the x (clear)...

AVIF has landed


Everybody is talking about AVIF today because of Jake’s blog post. As the say, I was today years old when I learned AVIF was a thing. But thanks to web technology being ahead of the game for once, we can already take advantage of it. This will be easier if you’ve abstracted your...

Working with JavaScript Media Queries


What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this: body {   background-color: plum; } 
 @media (min-width: 768px) {   body {     background-color: tomato;   } } CSS media queries are a core ingredient in any responsive...

Using @property for CSS Custom Properties


Una Kravetz digs into how Chrome now allows you to declare CSS custom properties directly from CSS with more information than just a string. So rather than something like this: html { --stop: 50%; } …can be declared with more details like this: @property --stop { syntax:...

Excluding Emojis From Transparent Text Clipping


CSS-Tricks has this pretty cool way of styling hovered links. By default, the text is a fairly common blue. But hover of the links, and they’re filled with a linear gradient. 😍 Pretty neat, right? And the trick isn’t all that complicated. On hover… give the link a linear...

Copy the Browser’s Native Focus Styles


Remy documented this the other day. Firefox supports a Highlight keyword and both Chrome and Safari support a -webkit-focus-ring-color keyword. So if you, for example, have removed focus from something and want to put it back in the same style as the browser default, or want to apply a focus style...

Leading-Trim: The Future of Digital Typesetting


leading-trim is a suggested new CSS property that lets us remove the extra spacing in every font so that we can more predictably style text. Ethan Wang has written about it — including how Microsoft has advocated for it — and that it’s now part of the Inline Layout Module Level 3 spec. You’d use...

Practical Use Cases for JavaScript’s closest() Method


Have you ever had the problem of finding the parent of a DOM node in JavaScript, but aren’t sure how many levels you have to traverse up to get to it? Let’s look at this HTML for instance: <div data-id="123"<buttonClick me</button</div That’s pretty straightforward, right? Say...

More Control Over CSS Borders With background-image


You can make a typical CSS border dashed or dotted. For example: .box { border: 1px dashed black; border: 3px dotted red; } You don’t have all that much control over how big or long the dashes or gaps are. And you certainly can’t give the dashes slants, fading, or animation!...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace