DEV Community

Ankit Verma
Ankit Verma

Posted on

The Lost HTML & CSS Tricks Every Developer Should Know (with Examples)

#webdev #beginners #css #html

In the race toward SPAs, frameworks, and heavy JS libraries, many developers have forgotten the magical simplicity of native HTML and CSS. These features can add a lot of power to your web apps — without any JavaScript.

🔹 Forgotten HTML Tricks (with Examples)

1. <details> and <summary>

No JS? No problem! Easily create toggleable content.

<details>
  <summary>Show More</summary>
  <p>This content is revealed when you click "Show More".</p>
</details>
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: FAQs, accordions, and hidden sections.

2. Native Input Types

HTML5 brought several smart input types that auto-validate and give enhanced UX.

<form>
  Pick a color: <input type="color"><br><br>
  Choose a date: <input type="date"><br><br>
  Set volume: <input type="range" min="0" max="100">
</form>
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: Dashboards, forms, and settings panels.

3. spellcheck Attribute

Disable annoying red underlines for code or brand names.

<textarea spellcheck="false">
type Command = 'ls' | 'cd' | 'rm';
</textarea>
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: Code blocks, usernames, or technical terms.

4. hidden Attribute

Quickly hide elements without using CSS classes.

<p>This is visible.</p>
<p hidden>This is not.</p>
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: Conditional rendering and dynamic UIs.

5. translate="no"

Tell Google Translate to leave certain content alone.

<span translate="no">iPhone 15 Pro Max</span>
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: Brand names, acronyms, and technical terms.

🔸 Forgotten CSS Tricks (with Examples)

1. Scroll Snapping

Make scrollable containers snap to sections for smooth UX.

HTML:

<div class="scroll-container">
  <section class="snap">Section 1</section>
  <section class="snap">Section 2</section>
  <section class="snap">Section 3</section>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS:

.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}
.snap {
  scroll-snap-align: start;
  height: 100vh;
  padding: 2rem;
  background: #f5f5f5;
  border-bottom: 1px solid #ccc;
}
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: Presentations, portfolios, full-page sliders.

2. :has() Parent Selector

Style parents based on child elements — now supported in modern browsers!

Example:

.card:has(img) {
  border: 2px solid green;
}
Enter fullscreen mode Exit fullscreen mode

HTML:

<div class="card">
  <img src="example.jpg" alt="Image">
  <p>Has image</p>
</div>
<div class="card">
  <p>No image here</p>
</div>
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: Dynamic content without JS DOM checks.

3. accent-color

Customize native form controls.

CSS:

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: #007BFF;
}
Enter fullscreen mode Exit fullscreen mode

HTML:

<input type="checkbox" checked> Remember me  
<input type="range" min="0" max="100">
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: Keeping brand consistency in forms.

4. clip-path

Easily shape elements like circles, polygons, and custom silhouettes.

CSS:

.circle {
  clip-path: circle(50%);
  width: 200px;
  height: 200px;
  background: url('https://via.placeholder.com/200') no-repeat center/cover;
}
Enter fullscreen mode Exit fullscreen mode

HTML:

<div class="circle"></div>
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: Avatars, creative cards, hover effects.

5. @supports for Feature Detection

Progressively enhance your styles.

CSS:

@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
Enter fullscreen mode Exit fullscreen mode

HTML:

<div class="layout">
  <div>Column 1</div>
  <div>Column 2</div>
</div>
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: Cross-browser design safety nets.

6. Pure CSS Tooltip with ::after

Tooltips without JS or libraries.

CSS:

.tooltip {
  position: relative;
  cursor: help;
}

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  top: 120%;
  left: 0;
  background: black;
  color: white;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  display: none;
  z-index: 10;
}

.tooltip:hover::after {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

HTML:

<span class="tooltip" data-tip="This is a tooltip!">Hover me</span>
Enter fullscreen mode Exit fullscreen mode

✅ Perfect for: Helpful labels, form hints, UI descriptions.

Top comments (0)