Skip to main content

Search

Items tagged with: css


Content warning: My two cents on CSS


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.

https://heydonworks.com/article/what-is-utility-first-css/

#css #tailwind


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


Tailwind vs. Semantic CSS
https://nuejs.org/blog/tailwind-vs-semantic-css/
"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>`
`­`
https://adrianroselli.com/2024/02/techniques-to-break-words.html

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

#HTML #CSS

#html #css


CSS + Accessibility: Inclusion Through User Choice
https://noti.st/cariefisher/1gWjQz/css-accessibility-inclusion-through-user-choice
Presentation slides from WordPress Accessibility Day by Carie Fisher
#css #a11y #webdesign #webdev


While some technology seems to be moving in the direction of treating HTML and CSS like binary code—obfuscated—others like #WebComponents, #CSS Cascade Layers and `@scope`, and custom properties (unregistered and registered, and especially with style queries) are moving in the opposite direction: making HTML and CSS more declarative than ever. I honestly believe the best “view-source” days are ahead, not behind.


How do folks feel about links not being underlined but instead being in inverted colors? (that is, if the page is a "light mode" black text on white background, links are white text on black background)?

#WebDev #WebDesign #Accessibility #WebAccessibility #A11y #HTML #CSS


"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."

https://www.htmhell.dev/adventcalendar/2023/20/

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
https://chrome.google.com/webstore/detail/text-spacing-editor/amnelgbfbdlfjeaobejkfmjjnmeddaoj
#a11y #wcag #tools #text #css #accessibility #webdesign


More goodness on prefers-reduced-transparency https://matuzo.at/blog/2023/100daysof-day103 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 😃
https://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()` https://codepen.io/patrickhlauke/pen/ExrNLzN (for improved screen reader experience) #a11y #accessibility


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


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.

https://bugzilla.mozilla.org/1731541
https://developer.chrome.com/blog/css-text-wrap-balance/
#CSS #Typography


"you can do a lot with native HTML fields using just a little CSS" https://adrianroselli.com/2021/03/under-engineered-select-menus.html #webdev #css #a11y #i18n


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 https://tinyurl.com/CSAScientistsLetter and still open for additional signatures.

* The second (in German, by #Austrian academics) one is online at https://www.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" (https://www.wired.co.uk/article/europe-break-encryption-leaked-document-csa-law).

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


Od kolegů v práci jsem získal prestižní ocenění za svou celoživotní práci s #css

Printed by @stepan


An Introduction to the Reduced Motion Media Query: https://css-tricks.com/introduction-reduced-motion-media-query/ by Eric Bailey #a11y #webdesign #css


Making the GOV dot UK Frontend typography scale more accessible: https://designnotes.blog.gov.uk/2022/12/12/making-the-gov-uk-frontend-typography-scale-more-accessible/ #webdev #webdesign #typography #css #a11y


CSS-only Widgets Are Inaccessible https://adrianroselli.com/2023/03/css-only-widgets-are-inaccessible.html by @aardrian #webdev #css #a11y #aria


#Development #Outlooks
The end of front-end development · Things are going to change, but not in the scary way people are saying https://ilo.im/11t8v2

_____
#Job #AI #GPT4 #ChatGPT #ChatBot #WebDevelopment #WebDev #Code #Frontend #HTML #CSS #JavaScript #Skills #Productivity


Designing With Reduced Motion For Motion Sensitivities (2020) https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/ #webdesign #a11y #motion #css


What’s the right font size in web design? https://pimpmytype.com/font-size/ "Relative units rock" #webdesign #typography #css


📝 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.

https://11ty.rocks/posts/process-css-with-lightningcss/


Yup. "Line heights in CSS work better with ratios" https://andy-bell.co.uk/line-heights-in-css-work-better-with-ratios/ #css #webdesign


Using CSS to Enforce Accessibility https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html by @aardrian #css #aria #a11y #webdev


Creating A High-Contrast Design System With CSS Custom Properties https://www.smashingmagazine.com/2023/01/creating-high-contrast-design-system-css-custom-properties/ #css #webdesign


prefers-reduced-motion: Taking a no-motion-first approach to animations https://www.tatianamac.com/posts/prefers-reduced-motion/ #webdev #webdesign #animation #a11y #css


The Thing With Leading in CSS (vertical spacing/line height) https://matthiasott.com/notes/the-thing-with-leading-in-css by @matthiasott #webdesign #css #leading #typography