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!
You "counter" my above comment by splitting hairs about hyphens or dashes? What I was referring to is not if a line is a millimeter longer, or if something is spelled - or spelt - the British or American way, but when a normal sentence suddenly gets interrupted by words like xer xur xor xou or other stuff that doesn't seem to be a word and not in the context of fantasy stories (name of a wizard or monster or whatnot, you get the point).
I get slightly dizzy just looking back at the previous sentence. My condition is also triggered by wrong syntax, and honestly also by the wrong use of "their" / "there" / "they're", but there, it only causes a slight nausea, not a complete breakdown. I'll try to dig up some profiles on a dating site I've used before (not kidding), where it got really bad (I'm guessing here) - causing the condition to develop in the first place. I hope that by adding, that these words ("neopronouns") are 51 years old ('neo'?), you're not trying to make it somehow appear as if I'm protesting something long-standing or long established. Because: no, they're not established. For two reasons:
it goes back to way before the 1970s. Wikipedia mentions the 18th century!
weird pronouns will never really be established, because there's simply no consensus even among users: as soon as you think "singular they" has become a thing, "ze" gets introduced by someone else, then you say "OK, let's settle on 'ze'!" and xou, xee, xnghu get invented by someone else who finds... I guess by that time ... "they" boring(?). Meaning that very subgroup that is so fond of an alternative lexicon keeps stirring it up so it doesn't actually settle.
According to the article, there's only little actual support by the actual LGBTQ+ community, and also "opposition to the idea in both the cisgender and transgender communities. Many people find them unfamiliar and confusing to use. Some have said that use of neopronouns, especially noun-self pronouns, comes from a position of privilege, makes the LGBT+ community look like a joke, or that the attention placed on neopronouns pulls focus away from larger, more important issues, such as transphobic bullying, the murder of trans people, and suicide. Noun-self pronouns have been viewed by some as unhelpful and unnecessary."
I really wish it's my transphobia or conservativism or whatever neuroticism I might have developed from meeting too many crazy folks, but it's not limited to funky pronouns. I'm wondering whether there are others who suffer from the same or a similar condition (couldn't tell)... Imagine I'd rewrite this whole message, replacing "by" by "vey" and "it" by "og". You'd be uncomfortable reading it, even without my condition.
You'd struggle, and feel a little stupid for a second, until you realize my language is off. Then you'd start judging me, probably for making you question your own IQ. Those are "functional words" you say - so are pronouns.
My plea is simple: avoid neopronouns. Not even the LGBTQ-community adopts them (4%!). Just people who try to express how tolerant or nice they are. I could do the same with other words, but I put the reader's comfort above my own creativeness. I really don't give a damn about LGBTQ, swapping out vowels in other words would also give me a hard time.
I'm not sure if I'm alone with this, or if there are others who feel the same or similar.
wich unit mesurement is xem ? i know about rem, and em but... is it like a new type for phone like svh/dvh ?
“Xe”/“xem”/“xer”/“xers”/“xerself” are unofficial explicitly singular gender-neutral alternatives to “he”/“him”/“his”/“his”/“himself” or “she”/“her”/“her”/“hers”/“herself”. More recently, so-called “neopronouns” have gotten more mainstream attention in association with the LGBTQIA+ community, but I first became aware of them as a writer looking for an explicitly singular alternative to the ambiguous “they”, and they have long since become a regular part of my vocabulary. I hope that helps; I didn't intend confusion and generally try to use code styling when writing CSS units like
rem,em,vh,svh,lvh,dvh, etc.!Absolutely agree.
It’s better to use percentages instead of making hard rule
It is good to use relative units (such as
%orem) for font sizes in general, yes, but the base font size should also be left at1remin most cases rather than assuming the user set it to an undesired size and you know better!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.
Nice, did not know of
accent-color, that is really useful!Loving the code snippets, and the images help illustrate your points 😄
This really took me back to typography days.
Nice. checkbox color change
As others have mentioned, I also appreciate the before and after pictures. The clamp & text-wrap balance looks useful
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
Do note that this does take up significant resources for the calculations and is therefore only recommended to be used for headings (as shown in the blog post)
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
epic
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".
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
dev.to/vyan/introducing-docscan-th...
My new Blog!
Woww!, just amazing, thanks for sharing
Great recommendations! Re: 16px being too small, amen brother! Here's to getting old gracefully :)
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...
Some really great info here! Thank you for the simple tips
Really nice
This is nice....personally I love animations especially in desktop view. I however believe in creating a balance
This is awesome.. Thanks for sharing
This is a fantastic breakdown of a lot of cool tricks! Seriously good work!
Muchas gracias, me has ayudado a mejorar mis proyectos
Please can someone break down clamp for me?
In reference to the example above
Max-width: clamp(320px 90% 1000px,)
In terms of responsiveness