beercss 4.0.0

v4.0.0

on Node.js NPM

CHANGELOG 4.0.0

🚀 Added

• Updated all elements to be 100% valid HTML markup (#517)
• Updated all elements to get highscores on Google Lighthouse
• Prevented browser reflows
• Improved performance on all CSS animations
• Added h1...h6 classes on typography, to help write a valid HTML heading markup
• Checked "100% valid semantic HTML?" from TODO (#561)
• Updated scoped versions to use CSS nesting (saved 10kb of size)

🩹 Fixed

• Fixed CSS grid issues on Firefox (#562)
• Fixed size of input, select and textarea
• Fixed focus on li and a of menu

⚠️ Breaking changes

• None

Updated all elements to be 100% valid HTML

Our homepage are now 100% valid HTML, without errors, warnings or infos:

Menu

// DON'T
<button>
  <span>Button</span>
  <menu>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </menu>
</button>

// DO
<div>
  <button>
    <span>Button</span>
  </button>
  <menu>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </menu>
</div>

Tooltip

// DON'T
<button>
  <span>Button</span>
  <div class="tooltip"></div>
</button>

// DO
<button>
  <span>Button</span>
  <span class="tooltip"></span>
</button>

<div>
  <button>
    <span>Button</span>
  </button>
  <div class="tooltip"></div>
</div>

Inline/Block elements

// DON'T
<span>
  <div>...</div>
</span>

// DO
<span>
  <span>...</span>
</span>

<div>
  <span>...</span>
</div>

<div>
  <div>...</div>
</div>

You still can use the "DON'T way" but it's an invalid HTML markup

Updated all elements to get highscores on Google Lighthouse

After update, we got some perfect score on our templates.