Search
enterkeyhint
5.11.2021
I only just recently learned the enterkeyhint attribute on form inputs was a thing! It seems like kind of a big deal to me, as crafting HTML form markup is a decent slice of a front-end developer’s life, and this …
The post enterkeyhint appeared first on CSS-Tricks. You can support...
Your Image Is Probably Not Decorative
20.7.2021
Eric doesn’t mince words, especially in the title, but also in the conclusion:
In modern web design and development, displaying an image is a highly intentional act. Alternate descriptions allow us to explain the content of the image, and in
…
The post Your Image Is Probably...
Images are hard.
19.7.2021
Putting images on websites is incredibly simple, yes? Actually, yes, it is. You use <img> and link it to a valid source in the href attribute and you’re done. Except that there are (counts fingers) 927 things you could (and …
The post Images are hard. appeared first...
Meta Theme Color and Trickery
13.7.2021
Starting with Version 15, Safari supports the theme-color <meta> tag both on macOS and iOS. That’s exciting news because now the first desktop browser supports this <meta> tag and it also supports the media attribute and the prefers-color-scheme media feature.…
The post Meta...
Inline Styles as Classes (lol)
16.6.2021
If you’re abhorred by using inline styles, just move that style to the class attribute! And then make sure you have CSS in place that, ya know, does what it says on the box.
I've revolutionized CSS. pic.twitter.com/1AWCldyCwP
— Sam
…
The post Inline Styles as Classes (lol)...
Making Disabled Buttons More Inclusive
12.5.2021
Let’s talk about disabled buttons. Specifically, let’s get into why we use them and how we can do better than the traditional disabled attribute in HTML (e.g. <button disabled> ) to mark a button as disabled.
There are lots of …
The post Making Disabled Buttons More Inclusive...
The `ping` attribute on anchor links
8.4.2021
I didn’t know this was a thing until Stefan Judis’s post:
<a href="https://www.stefanjudis.com/popular-posts/"
ping="https://www.stefanjudis.com/tracking/"Read popular posts</a
You give an anchor link a URL via a ping attribute, and the browser will hit that URL with a...
US House Representative Ro Khanna Lauds BTC Which ‘Cannot Be Devalued’- Calls for Less Carbon Intensive Mining
7.3.2021
After Elizabeth Warren, the U.S. Senator for Massachusetts called bitcoin a speculative asset, Ro Khanna, the U.S. House Representative for California has spoken in favor of the crypto asset. In his Twitter statement, Khanna says “bitcoin just like digital gold cannot be devalued.”...
Representation Matters
15.12.2020
This year I had the pleasure of re-launching The Accessibility Project. I spend a lot of time researching and writing about accessibility and inclusive design, so this felt like the cumulation of a lot of that effort. The site now uses all sorts of cool web features like CSS Grid, @supports,...
Use a Submit Button Outside of !
24.11.2020
Have you ever felt like you’ve been a professional developer or designer forever, and somehow not known something basic, and borderline hate yourself? That’s me with a trick that was introduced to me by Miguel Piedrafita: 🔥 You can submit forms from a button outside of the form...
GIFS and prefers-reduced-motion
3.11.2020
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...
SVG Title vs. HTML Title Attribute
30.7.2020
You know the title attribute? I can do this:
<div title="The Title"I'm a div with a `title`
</div
And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get…
Which, uh, I guess is something. I sometimes use it for things like putting...
Responsive Styling Using Attribute Selectors
30.6.2020
One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context.
<div class="span-12"</div<!-- we want this for small screens --<div class="span-6"</div<!-- we want this for medium screens --<div...
Data Shows the US Economy Was Collapsing 5 Months Before the Coronavirus Outbreak
3.5.2020
During the last two months, the global economy has shuddered and a great number of people still attribute the financial meltdown to the Covid-19 outbreak. However, during the last two weeks, the blame has shifted, as many citizens are now blaming the government lockdowns, overly-predictive models...
Cloudinary Studio
2.4.2020
I knew that Cloudinary worked with video as well as images but, the other day, I was curious if Cloudinary offered a video player embed just like other video hosts do (e.g. YouTube, Vimeo, etc). Like an <iframe> that comes with a special player.
I was curious because, as much as...
Did You Know the Ordered List Element Has Start and Reversed Attributes?
24.3.2020
I sure didn't! Tomek Sułkowsi shows how we can reverse the numbering of ordered lists with a simple HTML attribute:
<ol reversed<liApple</li<liBanana</li<liPear</li</ol
CodePen Embed Fallback
And the start attribute can be added to begin the list at a number other...
Using the HTML title attribute
15.3.2020
Steve Faulkner:
User groups not well served by use of the title attribute
• Mobile phone users.• Keyboard only users.• Screen magnifier users.• Screen reader users.• Users with fine motor skill impairments.• Users with cognitive impairments.
Sounds like in 2020, the only useful thing the title...
A Complete Guide to Data Attributes
18.2.2020
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
The post A Complete Guide to Data Attributes appeared first on CSS-Tricks
Helping Browsers Optimize With The CSS Contain Property
10.2.2020
There is a growing number of things that we have to do to help the browser achieve for peak performance.
Responsive image syntax has several. For example, needing to tell the browser how large the image will be in our layout with the sizes attribute and how big the images are with w descriptors....
Select an Element with a Non-Empty Attribute
5.2.2020
Short answer:
[data-foo]:not([data-foo=""] {
Longer answer (same conclusion, just an explanation on why we might need this):
Say you have an element that you style with a special data-attribute:
<div data-highlight="product"</div
You want to target that element and do special things when...