Skip to main content

Search

Items tagged with: css


Would have been nice to have a :focus-visible-within, but you can achieve pretty much the same with :has(:focus-visible)

Magic of CSS.

#css

#css


New year, new role @Mastodon!

Our core team is looking for a senior Front-end Developer to elevate the web UI/UX experience for our users.

Ideally:

1. You are highly skilled in accessible and semantic #HTML
2. Proficient in modern #CSS
3. Experienced with #Javascript, #Typescript and complex React/Redux applications

This remote full-time position requires a 4-hour overlap with the CET timezone.

For more info/to apply:
jobs.ashbyhq.com/mastodon/6a09…

#FediHire #GetFediHired #hiring #frontend


I love to see coding tutorials like this make the coder code for accessibility by giving them examples and stating up front they do not treat accessibility as an afterthought write-on.org/html/ #CSS #WebDev #HTML #Accessibility #A11y


Good morning #fediverse !

I'm feeling #KISS today...

« Keep
IT
Simple
Stupid »

(Amazing, how many things you can do with just simple,

#html
+
#css
+
#javascript

cc @cferdinandi ... who amongst others, inspired me , thX


New blog post: “Short Lines, Bad Breaks, and CSS”

blog.kizu.dev/short-lines-bad-…

In today’s CSSWG meeting, there was one issue about the new value of `text-wrap-style` property — `avoid-orphans`.

There was agreement in the meeting that we should look for a better name, and open a separate issue about this, which I did, as well as opened another one — about the `orphans` and `widows` properties.

#CSS #Typography


I'm available for speaking gigs in 2025, if your conference or team is interested in talks/workshops on #CSS!

I love to go in-depth on the classics –cascade, grids, alignment, etc. But I can also teach the new hits: container queries, colors, layers, :has(), et al.

Let's get scheduled!

#css


Semantic websites are awesome! Among other things, they let you write reusable CSS. Please send me your semantic websites, so I can analyze them for common patterns and write a composable CSS framework.

jak2k.schwanenberg.name/post/c…

#indieweb #smolweb #semanticHTML #html #semantic #css #semanticcss


Recently I asked about choosing a style sheet for developing a personal Web site that would automate the visual presentation, allowing me, as a nonvisual author, to concentrate on the markup and content.
I've started working on the site, using the "classless" version of this style sheet. github.com/picocss/pico/
I'm using the Hugo static site generator. I'll write more about it when I create a blog for longer-form posts.
#accessibility #css #WebDevelopment


People on StackOverflow telling people to screw up #accessibility with the HTML dialog element defeats the purpose of using that element in the first place IMO. Please upvote my answer that corrects the numerous wrong answers, including the accepted answer, to this question if you have an SO account.

stackoverflow.com/a/79028606/2…

#webDev #a11y #html #css #javaScript


The CSSWG as agreed to publish a first Working Draft for Masonry layout – with the two major proposals merged where possible, and otherwise presented side by side. Most of the differences are syntax only.

Here's the Editor's Draft that will be published:

drafts.csswg.org/css-grid-3/

And the discussion:

github.com/w3c/csswg-drafts/is…

#css

#css


How to Use Rem Units in CSS for Accessible Design a11y-collective.com/blog/what-… #css #webdesign #a11y


Don't Use JS for That: Moving Features to CSS and HTML by Kilian Valkhof 👏

Of course, ensure it's accessible – especially the scroll example in this presentation.

youtube.com/watch?v=IP_rtWEMR0… #webdev #webdevelopment #javascript #css


alt text in #CSS generated `content` is now supported all modern browsers (as of firefox 128 and safari 17.4)

please hide your weird glyphs and icon fonts using an empty string like this:

```
content: "›";
content: "›" / "";
```

developer.mozilla.org/en-US/do…

#css


New post, another in my series of using the right lingo while also carrying the IKEA vibe:

“Be Careful Using ‘Grid’”
adrianroselli.com/2024/07/be-c…

I try to disambiguate between 8 different meanings of the word ‘grid’ in a web dev context.

#HTML #ARIA #CSS #accessibility #a11y


Why don’t we talk about minifying CSS anymore? blog.sentry.io/why-dont-we-tal…

Me: because Javascript is a much, much, much bigger problem for web performance.

#a11y #webdev #css #javascript #webperf


Modern CSS Layouts: You Might Not Need A Framework For That smashingmagazine.com/2024/05/m… #css #webdesign #webdev #webdevelopment


Checkout @alice update on GTK CSS :gtk: 💅

blogs.gnome.org/alicem/2024/06…

So many goodies 🤩

• variables
• color()
• color-mix()
• relative colors
• rgb, hsl, linear srgb, hwb, oklab, oklch, ...
• math functions
• accent colors

#GTK #CSS #GNOME


I remember longing for proper skipping of descenders in #CSS. Now that skipping is default in most browser I’m often struck by how *terrible* it is for hyperlink legibility.

The first line in the image shows a linked line with text-decoration-skip-ink set to "auto".

The second line shows the same linked line with text-decoration-skip-ink set to "none".

Just by looking at the first line, you can’t say if it is multiple links or or not.

#ux #accessibility

Perhaps something for @Seirdy.


This piece from @heydon details his system for using the new features of #CSS to test HTML for proper semantics and structure. Just incredible what’s going on in some of these selectors.

#WebDev

heydonworks.com/article/testin…


Retro; the customizable clock widget is now available on Flathub in v2

What's new:

• 24/12h support (follows GNOME Settings)
• Energy usage optimizations
• Better support for round clocks
• Controls moved out of the way

What do you think of the floating header bar?

flathub.org/apps/re.sonny.Retr…

#GNOME #GTK #CSS #Flathub #Flatpak #Linux


This is so f***** up!! O_O

Be aware when you receive HTML emails (who doesn't?)!

gruene.social/@weddige/1121903…

#HTML #HTMLmail #CSS
#Phishing #SCAM
#SocialEngineering
#Thunderbird #Outlook
#KoboldLetters


S @heydon nesouhlasim temer v nicem, ale jeho clanky rozhodne stoji za to cist. Pokud jste nekompromisni zastanci filozofie "Pokud se ti nelibi CSS, tak ho jenom neumis dost dobre", tak budete chrochtat blahem.

Pro nas ostatni je to dilek do skladanky, jak nad frontend vyvojem uvazovat a hluboke zamysleni nad dogmatismem v IT.

heydonworks.com/article/what-i…

#css #tailwind


Designing better target sizes 👉 ishadeed.com/article/target-si… "An interactive guide that is all about enhancing the target size area with CSS" #css #webdesign #UIDesign #a11y


Tailwind vs. Semantic CSS
nuejs.org/blog/tailwind-vs-sem…
"Semantic version is several times smaller, renders faster, and requires no extra CSS tooling"
#webperf #css #webdev


In “Techniques to Break Words” I quickly review:
`word-break`
`overflow-wrap`
`hyphens`
`<wbr>`
`­`
adrianroselli.com/2024/02/tech…

You can play around with the demo directly:
cdpn.io/aardrian/debug/eYoOdrX

#HTML #CSS

#html #css


CSS + Accessibility: Inclusion Through User Choice
noti.st/cariefisher/1gWjQz/css…
Presentation slides from WordPress Accessibility Day by Carie Fisher
#css #a11y #webdesign #webdev


"Most importantly, tooltips should only provide descriptive and non-essential text, giving slightly more detailed text for active elements such as links and form controls. Ultimately, they provide expendable text which is already on the web page."

htmhell.dev/adventcalendar/202…

Great in-depth article about #tooltips by Jan Hellbusch. He knows what he's talking about, had the pleasure to be in one of his workshops and he's an absolute pro. 🤯

#HTML #CSS #JavaScript #accessibility #a11y #HTMHell


Text Spacing Editor — a Chrome extension for testing WCAG SC 1.4.12 - Text Spacing
chrome.google.com/webstore/det…
#a11y #wcag #tools #text #css #accessibility #webdesign


More goodness on prefers-reduced-transparency matuzo.at/blog/2023/100daysof-… from @matuzo #css #a11y


SmolCSS je blog s užitečnými CSS snippety. Jednoduše vysvětleno i ukázáno. Přesně jak to mám rád. Ten budu často navštěvovat 😃
smolcss.dev/
#developer #css


some sunday #CSS noodling (i'm sure somebody else came up with the same idea somewhere, but heck, wanted to see if it worked anyway): floating `<label>` using `:has()` codepen.io/patrickhlauke/pen/E… (for improved screen reader experience) #a11y #accessibility


Card Pattern — nice techniques here! codepen.io/Merri/full/QWVZMeo by @MerriNet (forked a couple times, original by Erik Kroes) #webdev #a11y #html #css