Search
Items tagged with: css
Modern CSS Layouts: You Might Not Need A Framework For That — Smashing Magazine
It’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts.Smashing Magazine
Checkout @alice update on GTK CSS 
💅
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
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.
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.
heydonworks.com/article/testin…
Testing HTML With Modern CSS
CSS can be a great HTML testing tool, especially in 2024Heydon Pickering (heydonworks.com)
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
Konstantin Weddige (@weddige@gruene.social)
Attached: 1 image Welcome to another edition of "Is this phishing?" Assume the email is in principle plausible and the transaction ID exists. What is the worst that can happen if you press send? #phishinggruene.social
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…
What is Utility-First CSS?
Learn about utility-first CSS and what is meant by “utility“ in this contextHeydon Pickering (heydonworks.com)
Designing better target sizes
An interactive guide on designing better target sizes on the web.ishadeed.com
nuejs.org/blog/tailwind-vs-sem…
"Semantic version is several times smaller, renders faster, and requires no extra CSS tooling"
#webperf #css #webdev
Tailwind vs Semantic CSS
Comparing two identically designed websites, their weight, amount of HTML and CSS, rendering speed, and best practices.nuejs.org
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
Techniques to Break Words
Photo by studio tdes. Used under CC BY 2.0 Deed. Image cropped and contrast enhanced. A few days ago Benjy Stanton asked about breaking long words in tables. I offered a suggestion, which may or may not have worked. I never asked.Adrian Roselli
noti.st/cariefisher/1gWjQz/css…
Presentation slides from WordPress Accessibility Day by Carie Fisher
#css #a11y #webdesign #webdev
CSS + Accessibility: Inclusion Through User Choice by Carie Fisher
Every day we have a series of choices to make. Get up early to work out or hit the snooze button? Double foam mocha latte or decaf green tea? Tabs or spaces? Our choices — even the small ones — shape our identities and help frame how we see the world…noti.st
"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
Design pattern for custom tooltips - HTMHell
A collection of bad practices in HTML, copied from real websites.Design pattern for custom tooltips - HTMHell
chrome.google.com/webstore/det…
#a11y #wcag #tools #text #css #accessibility #webdesign
Text Spacing Editor
A tool for editing text spacing properties on web pages. WCAG conformance information included.chrome.google.com
About CSS prefers-reduced-transparency:
developer.chrome.com/blog/css-…
#UIDesign #CSS #usability #a11y
CSS prefers-reduced-transparency - Chrome for Developers
Optimize and adjust for users who prefer an opaque UI.Chrome for Developers
Day 103: the prefers-reduced-transparency media feature - Manuel Matuzovic
I'm a frontend developer in Graz, specialized in HTML, accessibility, and CSS layout and architecture.Manuel Matuzovic
smolcss.dev/
#developer #css
ashleemboyer.com/blog/don-t-us… #a11y #css #webdev #webdesign
Don't Use Fixed CSS height or width on Buttons, Links, or Any Other Text Containers | Ashlee M Boyer
Fixed heights and widths risk 'loss of content' when text is resized.ashleemboyer.com
text-wrap:balance has landed on the latest Firefox 🎉
This allows multiple lines of text to have their lines broken in such a way that each line is roughly the same width, often used to make headlines more readable and visually appealing.
bugzilla.mozilla.org/1731541
developer.chrome.com/blog/css-…
#CSS #Typography
CSS text-wrap: balance - Chrome for Developers
A classic typography technique of hand-authoring line breaks for balanced text blocks, comes to CSS.Chrome for Developers
Under-Engineered Select Menus
Others in this sorta-series: Under-Engineered Custom Radio Buttons and Checkboxen Under-Engineered Toggles Under-Engineered Toggles Too Under-Engineered Text Boxen I am still confounded how many developers and designers see a and immediately…Adrian Roselli
Today, two open letters from academics on the scientific arguments against the current #CSS (client side scanning) initiatives have been released:
* The first (in English, internationally coordinated) one is online at tinyurl.com/CSAScientistsLette… and still open for additional signatures.
* The second (in German, by #Austrian academics) one is online at ins.jku.at/chatcontrol/ and explicitly includes law experts in addition to the arguments from a security, privacy, and AI perspective.
This debate is expected to gain new steam with #Spain taking over the EU council presidency, given recently leaked statements like "Ideally, in our view, it would be desirable to legislatively prevent EU-based service providers from implementing end-to-end encryption" (wired.co.uk/article/europe-bre…).
Please boost on any channels you deem adequate. The discussion is still open, and we have little time to bring it to a more rational level.
#csam #law #eu #privacy #dataprotection #privacy #humanrights #messenger #chat #chatcontrol #signal #whatsapp #telegram #threema #e2ee
Leaked Government Document Shows Spain Wants to Ban End-to-End Encryption
In response to an EU proposal to scan private messages for illegal material, the country's officials said it is “imperative that we have access to the data.”Lily Hay Newman (WIRED UK)
Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences
Users change browser or OS settings to improve their experiences for a reason. We should respect these decisions by writing CSS.Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences
An Introduction to the Reduced Motion Media Query | CSS-Tricks
The open web's success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zoomingEric Bailey (CSS-Tricks)
Making the GOV.UK Frontend typography scale more accessible
We believe in working in the open. This blog is for designers across government to share their projects, ideas and concepts, or just to think out loud.designnotes.blog.gov.uk
CSS-only Widgets Are Inaccessible
Usually. I originally titled this InacCSS-onlyible. I even made this typographically, er, distinct image. Then I realized it was silly and will instead use the neologism in a talk so I can hear the groans IRL.Adrian Roselli
#Development #Outlooks
The end of front-end development · Things are going to change, but not in the scary way people are saying ilo.im/11t8v2
_____
#Job #AI #GPT4 #ChatGPT #ChatBot #WebDevelopment #WebDev #Code #Frontend #HTML #CSS #JavaScript #Skills #Productivity
The End of Front-End Development
Large language models like GPT-4 are becoming increasingly capable, at an alarming rate. Within a couple of years, we won't need developers any more! …Or at least, that's the narrative going viral on Twitter.ilo.im
Designing With Reduced Motion For Motion Sensitivities — Smashing Magazine
Thanks to the wide support of the prefers-reduced-motion-media feature, we now have more advanced ways to design motion that can be creative and innovative while also being safer for those with motion sensitivities.Smashing Magazine
What’s the right font size in web design? - Pimp my Type
If you want your text to be read, set it at a sufficient size! But what is a good font size, and how can you apply it in your web or app design? This article and video has answerers for you with some practical examples focused on body text in respons…Oliver (Pimp my Type)
Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences
Users change browser or OS settings to improve their experiences for a reason. We should respect these decisions by writing CSS.Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences
📝 Process CSS or Sass With LightningCSS in @eleventy
Use these plugins or code snippets to make #CSS a first-class templating language in Eleventy and add processing with LightningCSS and/or Sass.
11ty.rocks/posts/process-css-w…
Process CSS or Sass With LightningCSS | 11ty Rocks!
Use these plugins or code snippets to make CSS a first-class templating language in Eleventy and add processing with LightningCSS and/or Sass.11ty.rocks
100 Days Of More Or Less Modern CSS
A blog post about modern CSS every day for 100 days.100 Days Of More Or Less Modern CSS
Line heights in CSS work better with ratios
Say you’ve got this CSS and you need to set a nice, compact line height: h1 { font-size: 40px; } You open up the designer’s static design and it says the line height should be 44px. Easy peas…Andy Bell
The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed
A modern look at responsive web design.Ahmad Shadeed Blog
Using CSS to Enforce Accessibility
The CSS3 logo as a head atop a torso with its arms folded across its chest. I am a big proponent of the First Rule of ARIA (don’t use ARIA). But ARIA brings a lot to the table that HTML does not, such as complex widgets and state information that…Adrian Roselli
Creating A High-Contrast Design System With CSS Custom Properties — Smashing Magazine
Managing our colors can truly help people to access our content. In this article, Brecht de Ruyte takes a deep dive into how we can create a high-contrast system while maintaining a balance between designing something accessible and respecting the lo…Smashing Magazine