Most of these one-liners will be one declaration inside the CSS rule. In some cases, the selector will be more than just a simple element; in other...
For further actions, you may consider blocking this person and/or reporting abuse
Nice. Images before and after are really meaningful.
I was about to say the same.
Most of these are great, but please please please don't override the user's preferred body text size unless you are using a typeface that needs it! A low vision person likely already increased xer preferred text size across xer whole system; don't assume you know better than xem!
I think it's worth clarifying that the code in the article does account for the user's browser font size preferences.
Setting something like
pxspecifically would override it but usingremoremadjusts based on the base text size the user has set in the browser. 😊Yes, I know how
rems work, but a person who has already increased the base font size to xer comfort doesn't need you increasing it further, and a person who doesn't want the base font size enlarged doesn't need you overriding xer preference either.So is there any way to know if the user has changed a default browser font-size or not?
Good comment. But if you specifically accommodate people with low vision, please also accommodate people who need standard English (myself, I have a complex migraine issue that started in the Philippines; lots of non-standard English there...). My brain tries to decypher for a second "xer" etc... gets stuck, and as some kind of "protective measure" this migraine kicks in, completely deactivating my brain's language center for a good 15 minutes. It was diagnosed as mild stroke (transitory ischaemic attack), until a really good neurologist correctly diagnosed it as complex migraine, luckily taking me off blood thinners again. A bit of introspection lead me to the realization that it's a "shutdown response", and I can - somehow - manage. Coming full circle, low vision and my condition have something in common: I get this kind of tunnel vision, and visual artifacts during an attack. I'm not sure if you should put your own ... freedom of expression ... over my mental wellbeing. Which I would understand, if you didn't... maybe the designer's choice not to accommodate people with bad eyesight, and your choice not to change your way of writing to respect people like me, are related, and both (I guess) to be respected. However, if it doesn't cost an arm and a leg, both you and the designer could try to adhere to some kind of beneficial standards.
I agree accessibility is extremely important. I haven't heard of that condition before, and I am curious to learn more! What forms of “non-standard English” trigger that response, which standard of English does your condition tend to adhere to, and does it tend to center around spelling, grammar, sentence structure, or multiple of those?
You seem to be using U.S. spellings, so do you struggle with British spellings? Do you also struggle with regional dialects (I myself have lived in Virginia and the Boston area, and have noticed each's distinct local colloquialisms), different fields' professional jargon, made-up terms in works of fiction (as Shakespeare was notorious for), or slang from various decades? I noticed you also included liberal use of ellipses, and used hyphens where dashes would have technically been more correct, so is non-standard punctuation less triggering than non-standard terminology? Are there particular practices you find writers and developers can take to help mitigate your symptoms besides avoiding the use of one particular 51-year-old neopronoun? Thank you in advance for any insights you are willing to share or any links you have where I can learn more about this condition for my accessibility work!
Nice, did not know of
accent-color, that is really useful!Nice post! I especially appreciate two things:
Keep writing!
I dislike listicles. I really do. I find that, in general, they are lazy ways to present content, often mediocre, and more often than not they make statements that should have a ton of "ifs" attached to them (but don't). I tend to write them as "subtweets"/responses to other listicles I find online... Unfortunately, they have more impact than any other type of article I write.
Yup, I've experienced that myself. I wish actual good content was more popular.
This really took me back to typography days.
Loving the code snippets, and the images help illustrate your points 😄
As others have mentioned, I also appreciate the before and after pictures. The clamp & text-wrap balance looks useful
Nice. checkbox color change
These are really neat tricks. Now I need to find the Tailwind equivalent classes for some of these.
This was my discovery of the day.
It looks like they all exist - the one that's the least obvious to find is the max width 65ch, which is
max-w-prosetailwindcss.com/docs/text-wrap tailwind equivalent is
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
this property is not working with styled components, The IDE is giving me the warning of unknown property...i will provide the screenshort as well
Maybe the plugin needs update?
text-wrap: balanceis widely supported now.I have the latest version installed. I even asked chatgpt about it. Chatgpt told me that this property is not standard property of CSS that is why it is being identified as Unknown.
text-wrapis definitely part of the CSS standard, and thebalancevalue was added "recently" (years ago, although it was not implemented by browsers). You can check the W3C site with the information. In particular, the combinationtext-wrap: balanceis already implemented and supported by all major browsers (as indicated in the MDN link from my previous comment).yes i too noticed that in the meanwhile, i will try using this property in normal way, instead of using styled component library,maybe that will work
Love all of them, I will add them to my template repo's and play around with a few other options. Thanks for that!
About "Limit the width of text within the content" I am not sure about this one based on the before/after and/or if this is just my personal preference that I like the "before" better than the "after".
epic
How could I have lived until now without knowing "accent-color" !! Thanks ! XD
great write up! It seems clamp()/min()/etc. are supported for max-width and width for img too: developer.mozilla.org/en-US/docs/W...
Woww!, just amazing, thanks for sharing
This is a fantastic breakdown of a lot of cool tricks! Seriously good work!
This is awesome.. Thanks for sharing
Really nice
Great recommendations! Re: 16px being too small, amen brother! Here's to getting old gracefully :)
This is nice....personally I love animations especially in desktop view. I however believe in creating a balance
dev.to/vyan/introducing-docscan-th...
My new Blog!
Love the way you've structured this post. Will be sure to bookmark and go through my projects later and apply some of these tips
Some really great info here! Thank you for the simple tips
Please can someone break down clamp for me?
In reference to the example above
Max-width: clamp(320px 90% 1000px,)
In terms of responsiveness
Muchas gracias, me has ayudado a mejorar mis proyectos