If ShortPixel is activated and appopriately set up and the images optimized with ShortPixel, then the images should be served in the WebP format to browsers that support WebP.

This post is scheduled to be published in the future.

It should not be displayed by the theme.

One two three four five six seven eight.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Age, inquies, ista parva sunt. Inde igitur, inquit, ordiendum est. Hoc Hieronymus summum bonum esse dixit. Tum mihi Piso: Quid ergo?

• List item one
• List item two
• List item three
• List item four
• List item five
• List item six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Age, inquies, ista parva sunt. Inde igitur, inquit, ordiendum est. Hoc Hieronymus summum bonum esse dixit. Tum mihi Piso: Quid ergo?

Quorum altera prosunt, nocent altera. Non risu potius quam oratione eiciendum? Primum in nostrane potestate est, quid meminerimus? Et harum quidem rerum facilis est et expedita distinctio.

• List item one
  • List item one
    • List item one
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

Est, ut dicis, inquam. Duo Reges: constructio interrete. Sed in rebus apertissimis nimium longi sumus. Primum in nostrane potestate est, quid meminerimus?

Inquit, dasne adolescenti veniam? Quae cum dixisset, finem ille. Beatum, inquit. Quis est tam dissimile homini. Videamus animi partes, quarum est conspectus illustrior;

Resetting and restyling HTML buttons without a CSS framework...

Checklist

• color
• background-color
• cursor for disabled buttons
• font-size
• font-family
• line-height
• margin
• min-height and min-width

Reset

button {
  box-sizing: border-box;
  margin: 0;
  line-height: inherit;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

line-height may need attention if there are buttons with multiple lines of text. All other spacing can be controlled with the button height and the button padding.

NEXT. Prevent accidental selection of the button text on touch devices:

button {
  user-select: none;
}

[....] (true for Firefox xx.xx, Google Chrome xx.xx and Safari 14.0 as of November 2020). [....]

button {
  display: inline-flex;
}

Vertical and horizontal alignment within the flex box:

button {
  align-items: center;
  justify-content: center;
}

Set a border. The border color can later be changed for the different states of solid buttons or it can be set to currentColor for outlined buttons.

button {
  border: 2px solid transparent;
}

Dimensions

Set minimum size. WCAG 2.1 recommendation. Google recommendation.

button {
  min-width: 44px;
  min-height: 44px;
}

Disabled buttons

button:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}

Interactive states (hover and active)

Put together

button {
  box-sizing: border-box;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin: 0;

  min-width: 44px;
  min-height: 44px;

  border: 2px solid transparent;

  background-color: #080;

  padding: 0.25em 1.25em;

  line-height: inherit;

  color: #fff;

  font-family: inherit;
  font-size: inherit;

  user-select: none;
}

button:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}

button:hover {
  background-color: #060;
}

button:active {
  background-color: #090;
}

button:focus {
}

Notes

• :active does not seem to happen when hitting Enter.

Browser compatibility

• Safari 10 and earlier does not support flex or inline-flex on buttons.
• Alternative to flex for Safari 10 and earlier: text-align: center and vertical-align: center.

Resources

• Adrian Roselli - Target Size and 2.5.5
• MDN - CSS - Properties - appearance
• MDN - CSS - Properties - cursor
• MDN - CSS - Properties - user-select
• MDN - CSS - Pseudo-classes - :active
• MDN - HTML - Elements - button
• WCAG 2.1 - Understanding target size
• Florens Verschelde - Styling buttons, the right way
• Modern CSS Solutions - CSS button styling guide
• minireset.css

Resources: Working

• https://bugs.webkit.org/show_bug.cgi?id=169700
• https://css-tricks.com/overriding-default-button-styles/
• https://css-tricks.com/snippets/sass/luminance-color-function/
• https://design-system.service.gov.uk/get-started/focus-states/
• https://designsystem.digital.gov/components/button/
• https://fvsch.com/styling-buttons
• https://github.com/alphagov/govuk-design-system
• https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/button/_index.scss
• https://github.com/csstools/sanitize.css/blob/master/sanitize.css
• https://github.com/necolas/normalize.css/blob/master/normalize.css
• https://github.com/necolas/normalize.css/commit/170455d6f6850d3b5eefdaab7b36c8c327ca8678 – Removes cursor: pointer
• https://github.com/necolas/normalize.css/issues/566/?why-is-webkit-appearance-button-used
• https://github.com/sindresorhus/modern-normalize/blob/master/modern-normalize.css
• https://github.com/sindresorhus/modern-normalize
• https://moderncss.dev/css-button-styling-guide/
• https://stackoverflow.com/questions/1677990/what-is-the-difference-between-focus-and-active
• https://tailwindcss.com/docs/pseudo-class-variants
• https://xd.adobe.com/ideas/process/ui-design/designing-interactive-buttons-states/
• https://zellwk.com/blog/style-hover-focus-active-states/ – GOOD

Resources: :active

• https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari

[op-overview set_id="8745" highlight="day"]

This is test paragraph.