Home Web Front-end CSS Tutorial The Web's Worst Default

The Web's Worst Default

Mar 22, 2025 am 09:54 AM

The Web’s Worst Default

There are a lot of great defaults when it comes to browsers and the web. Think about all the accessibility features that are baked into HTML so that you don’t have to do weird stuff, like this example from Manuel:

<h2 role="heading" aria-level="1" >
  Title
</h2>
Copy after login

You can just write your

and the browser deals with the accessibility parts. This is why we should start with semantic HTML first before adding ARIA roles to everything.

There are other great defaults of the modern web, like responsive design: a lot of folks have mentioned that the web is responsive by default and it’s actually us web developers that break it.

Then there are defaults when it comes to CSS. I’m thinking of stuff like flex. It feels pretty darn good to slap display: flex onto a parent element and all the children just snap next to each other since that’s mostly what I want to accomplish.

So: defaults on the web are good!

But there’s also a lot of bad defaults. You might be familiar with my favorite website, an Incomplete List of Mistakes in the Design of CSS, where the CSS Working Group lists out a ton of problems in the CSS spec such as:

size should have been a shorthand for width and height instead of an @page property with a different definition

These defaults are annoying, some minor, some major. And some of them can be fixed, like the box-sizing CSS property. Yes, there was a time on the web when even adding padding, borders, or width to an element would be confusing as all heck. Now we don’t have to worry about that quite so much.

But I think the absolute worst default on the web was the backspace key—in most browsers, it would force users to go back to the previous page. There have been countless times where I’ve tried to remove text in an input field and suddenly I would be dragged back to the last page I was on and all my data would be lost. That sort of thing makes typing into forms feel so fragile, as if at any moment you might exhale and your entire house implodes.

Side note: I think this is why a lot of folks prefer native over the web. They feel how fragile the web is when it comes to these default settings. When you load an app it feels like you’re on solid ground but a web app? It’s a rickety house that’s ready to fall apart at any moment.

Anyway, I didn’t even realize that Chrome removed the backspace key shortcut way back in 2016! Firefox also removed it earlier this year and yet, to this very day, five years later, I’m still scared of clicking that darn backspace key. I’ll always hesitate if I click the wrong key and then, very slowly, I’ll make sure that I’m focused on the correct input, unless I nuke all my data in the form.

I think this is kind of a good lesson when designing software: first, default settings are the most important thing in the world and are very difficult to get right; second, even if you do the right thing and fix all those bad defaults, habits are extremely hard to break.

The above is the detailed content of The Web's Worst Default. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Working With GraphQL Caching Working With GraphQL Caching Mar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte Transition Making Your First Custom Svelte Transition Mar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Building an Ethereum app using Redwood.js and Fauna Building an Ethereum app using Redwood.js and Fauna Mar 28, 2025 am 09:18 AM

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

Show, Don't Tell Show, Don't Tell Mar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

How do you use CSS to create text effects, such as text shadows and gradients? How do you use CSS to create text effects, such as text shadows and gradients? Mar 14, 2025 am 11:10 AM

The article discusses using CSS for text effects like shadows and gradients, optimizing them for performance, and enhancing user experience. It also lists resources for beginners.(159 characters)

Creating Your Own Bragdoc With Eleventy Creating Your Own Bragdoc With Eleventy Mar 18, 2025 am 11:23 AM

No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.

What the Heck Are npm Commands? What the Heck Are npm Commands? Mar 15, 2025 am 11:36 AM

npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.

A bit on ci/cd A bit on ci/cd Apr 02, 2025 pm 06:21 PM

I&#039;d say "website" fits better than "mobile app" but I like this framing from Max Lynch:

See all articles