Take Care of Those Users Who May Experience Dizziness, Nausea, and Headaches - Deepstash
5 HTML and CSS Good Practices - DZone Web Dev

5 HTML and CSS Good Practices - DZone Web Dev

dzone.com

Keep reading for FREE

Take Care of Those Users Who May Experience Dizziness, Nausea, and Headaches

I think many designers and developers like to create animations. Yes, those interfaces look more interesting. But we have to be more careful.

In WCAG 2.2, there is section 2.3.3, which says that some users may experience dizziness, nausea, and headaches when they see animations that trigger moving elements.

Thus, if we create this type of animation, we should use the prefers-reduced-motion media feature. In this case, if people disable animations in the operating system, they won’t be displayed, and if they don’t do this, the animations will work. And we are going to take care of our users.

6

5 reads

justify-content and align-items Lose Items

There is a problem that is especially common with vertical positioning. This is due to the way these properties work. The fact is that the justify-content and align-items properties ignore the size of flex items & they will go beyond its borders and may not be displayed correctly.

For example a modal window with a cross button beyond the window, which makes it unavailable. You need to zoom out of the page to close it.

It can be solved by using the margin property set to auto. Inside a flex container, the auto value will be calculated based on the size of the container and its flex items.

6

3 reads

button type="button" Or href="#"

Developers often use anchor link to mark up interactive elements. The idea behind this is override the default link using JS and they will get button behavior.

At first glance, this makes sense. But there is a problem. Browsers still think it’s a link & right clicking it open the context menu of such an element, with options: “Open in a new tab”, “Open in a new window”, & “Open in a private window”.

When users see those items, they think that it is a link and they can open it, for example, in a new tab. When they do this, they get an unexpected result – they see the top of the page.

7

6 reads

alt-text Is Not a Duplicate Title

The alt attribute is quite useful. It helps screen reader users understand what is shown in the picture. Unfortunately, many developers don’t use it efficiently. They either duplicate the text around the picture or don’t add it at all.

But we can use alt differently. For example, use the title text as a basis and add more details about the image. For example, if you have a product card with a title and an image, you can use alt to describe the external characteristics of the product.

7

20 reads

justify-content: space-between Causes Unexpected Markup

When Flexbox first appeared, many people liked the justify-content property, which allowed them to evenly distribute grid items using space-between or space-around. And of course, they began to use it. But there is one problem.

When we use these values, we don’t think that the number of items may change. For example, if I use space-between to add 2 more items to a 4-column grid, they will appear on each side of the parent and not at the beginning of the line as the user expects.

Therefore, it is better to use margin if you need IE11 support, or column-gap to set space between items.

7

4 reads

CURATED BY

sunnyprakash

Stashing some smashing ideas along the way.

Ready for the next level?

Read Like a Pro

stash-superman-illustration

Explore the World’s

Best Ideas

200,000+ ideas on pretty much any topic. Created by the smartest people around & well-organized so you can explore at will.

An Idea for Everything

Explore the biggest library of insights. And we've infused it with powerful filtering tools so you can easily find what you need.

Knowledge Library

Powerful Saving & Organizational Tools

Save ideas for later reading, for personalized stashes, or for remembering it later.

# Personal Growth

Take Your Ideas

Anywhere

Organize your ideas & listen on the go. And with Pro, there are no limits.

Listen on the go

Just press play and we take care of the words.

Never worry about spotty connections

No Internet access? No problem. Within the mobile app, all your ideas are available, even when offline.

Get Organized with Stashes

Ideas for your next work project? Quotes that inspire you? Put them in the right place so you never lose them.

Join

2 Million Stashers

4.8

Stars

5,740 Reviews

App Store

4.7

Stars

72,690 Reviews

Google Play

Sean Green

Great interesting short snippets of informative articles. Highly recommended to anyone who loves information and lacks patience.

samz905

Don’t look further if you love learning new things. A refreshing concept that provides quick ideas for busy thought leaders.

Shankul Varada

Best app ever! You heard it right. This app has helped me get back on my quest to get things done while equipping myself with knowledge everyday.

Ashley Anthony

This app is LOADED with RELEVANT, HELPFUL, AND EDUCATIONAL material. It is creatively intellectual, yet minimal enough to not overstimulate and create a learning block. I am exceptionally impressed with this app!

Giovanna Scalzone

Brilliant. It feels fresh and encouraging. So many interesting pieces of information that are just enough to absorb and apply. So happy I found this.

Jamyson Haug

Great for quick bits of information and interesting ideas around whatever topics you are interested in. Visually, it looks great as well.

Ghazala Begum

Even five minutes a day will improve your thinking. I've come across new ideas and learnt to improve existing ways to become more motivated, confident and happier.

Laetitia Berton

I have only been using it for a few days now, but I have found answers to questions I had never consciously formulated, or to problems I face everyday at work or at home. I wish I had found this earlier, highly recommended!

Read & Learn

20x Faster

without
deepstash

with
deepstash

with

deepstash

Access to 200,000+ ideas

Access to the mobile app

Unlimited idea saving & library

Unlimited history

Unlimited listening to ideas

Downloading & offline access

Personalized recommendations

FAQ

Claim Your Limited Offer

Get Deepstash Pro

BLACK FRIDAY

75% OFF | 1-Year Pro Subscription

Claim Offer