Essays

Interesting HTML and CSS Features That Are Somehow Overlooked

A look at five overlooked HTML and CSS features: the form attribute for linking elements outside forms, validation control with novalidate, language-based styling with :lang(), the inset shorthand property, and mathematical constants in calc().

The world of frontend development moves fast, and in the constant stream of updates it's easy to miss or forget about some genuinely useful HTML and CSS features. Let's explore five of them.

1. The form Attribute

The form attribute enables connecting form elements (button, fieldset, input, object, output, select, textarea) to a <form> element located outside their normal nesting structure.

<body>
  <form id="login-form">
    <div class="field">
      <label class="field__label" for="login">Login</label>
      <input class="field__input" id="login" type="email" required>
    </div>
    <div class="field">
      <label class="field__label" for="password">Password</label>
      <input class="field__input" id="password" type="password" minlength="4" required>
      <span class="field__hint">Password must be longer than 3 characters</span>
    </div>
  </form>
  <button form="login-form" type="submit">Log In</button>
</body>

Notice how the submit button sits outside the <form> tag but is still connected to it via form="login-form". This is extremely useful when layout constraints prevent nesting the button inside the form.

2. Form Validation Attributes: novalidate and formnovalidate

novalidate on the <form> element disables built-in browser validation messages entirely.

formnovalidate on a <button type="submit"> disables validation for that specific submission while allowing CSS pseudo-classes (:valid, :invalid, :user-valid, :user-invalid) to continue functioning.

This means you can build custom validation UI with CSS while suppressing the browser's default validation popups:

:user-valid {
  background-color: green;
}

3. The :lang() Pseudo-class

You can style elements based on their language attributes without requiring additional classes:

<p>
  HTML (from English <span lang="en">HyperText Markup Language</span>
  — "hypertext markup language")
</p>
:lang(en) {
  font-style: italic;
}

Advanced usage with :not():

:not(:lang(ru)) {
  font-style: italic;
}

Typography example — language-specific quotation marks:

:lang(ru) {
  quotes: "\00AB" "\00BB";
}

:lang(en) {
  quotes: "\201C" "\201D";
}

4. The inset Property

The inset property replaces the verbose combination of top, right, bottom, left properties.

Before:

.awesome-block {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

After:

.awesome-block {
  position: absolute;
  inset: 0;
}

Much cleaner! The inset property accepts the same value syntax as margin or padding — one value for all sides, two values for vertical/horizontal, or four values for each side individually.

5. Mathematical Keywords in calc(): e, pi, infinity, NaN

These <calc-keyword> values expand mathematical function capabilities in CSS:

.awesome-block {
  width: 2rem;
  height: 2rem;
  background-color: tomato;
  margin: calc(10px * pi);
}

Important constraint: These keywords only work within mathematical functions like calc(). Standalone usage produces errors:

z-index: e;       /* Invalid */
z-index: calc(e); /* Valid */

Conclusion

These five features are all well-supported across modern browsers yet remain underused:

  • Form element linking via the form attribute
  • Native validation control with novalidate and formnovalidate
  • Language-based styling with :lang()
  • Code brevity with the inset property
  • Mathematical constants for advanced CSS calculations

Next time you're building a form, styling multilingual content, or positioning elements, consider reaching for these native capabilities before adding JavaScript workarounds or extra CSS classes.

Further reading