frontline-css-reset.css

/*! Frontline CSS Reset https://github.com/Threespot/frontline-css-reset/ */

/*
  Remove default margin and padding, set common properties to “inherit”
  Note: The universal selector (*) has zero specificity
*/
* {
  box-sizing: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

/*
  Inherit box-sizing on pseudo elements
  Note: We’re not using :where() since we want these styles
        to apply on old browsers to avoid breaking the layout.
*/
*:before,
*:after {
  box-sizing: inherit;
}

/*
  1. Set “box-sizing: border-box;” by default
     http://www.paulirish.com/2012/box-sizing-border-box-ftw/
     https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
  2. Prevent iOS Safari from increasing the font-size in landscape view
     https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
*/
html {
  box-sizing: border-box;/* 1 */
  -webkit-text-size-adjust: 100%;/* 2 */
}

/* Reset heading weight, allow long words to break */
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: normal;
  overflow-wrap: break-word;
}

/*
  Allow long words and links to break, prevent orphans
  https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
*/
:where(p) {
  overflow-wrap: break-word;
  text-wrap: pretty;
}


/* Fluid media */
:where(img, picture, video, canvas) {
  block-size: auto;/* i.e. margin-left/margin-right */
  display: block;
  max-inline-size: 100%;
}

/*
  1. Ensure 3rd-party iframe embeds don’t overlap sticky headers,
     nav dropdowns, modals, or other similar elements.
*/
:where(iframe, object, embed) {
  display: block;
  max-inline-size: 100%;
  position: relative;/* 1 */
  z-index: 1;/* 1 */
}

/* Set 16:9 aspect ration on video embeds */
:where(iframe[src*="vimeo.com"], iframe[src*="youtube.com"]) {
  aspect-ratio: 16 / 9;
  height: auto;
}

/*
  Only remove list bullets when role="list" is applied in order
  to prevent VO in Safari from removing the list semantics.
  https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
  https://piccalil.li/blog/a-modern-css-reset/
*/
:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
}

/* Add default padding back for list with bullets */
:where(ul:not([role]), ol:not([role])) {
  padding-inline-start: revert;
}

/* Reset default table styles */
:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Don’t italicize these elements by default */
:where(address, cite, dfn, var) {
  font-style: normal;
}

/* Standardize abbr underline (missing in Safari) */
:where(abbr[title]) {
  text-decoration: underline dotted;
}

/* Standardize strikethrough (<1px in Firefox) */
:where(del) {
  text-decoration-thickness: 1px;
}

/* Remove underline to avoid looking like a link */
:where(ins) {
  text-decoration: none;
}

/* Allow preformatted text to wrap by default */
:where(pre) {
  white-space: pre-wrap;
  word-break: break-word;
}

/*
  Since we set “font-size: inherit;” on all elements we need to reset the
  font size to the browser default.
*/
:where(small) {
  font-size: smaller;
}

/* Prevent superscript and subscript text from affecting their parent’s line height */
:where(sub, sup) {
  line-height: 0;
}

/* Remove border on fieldsets */
:where(fieldset) {
  border: 0;
}

/* Inherit font styles for form fields */
/* Note: You can’t style <select> text in macOS Safari */
:where(button, input, select, textarea) {
  font: inherit;
}

/*
  Standardize button styles
  https://css-tricks.com/system-things/
  https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/#forced-colors-mode-keywords
*/
:where(
  button,
  [type="button"],
  [type="reset"],
  [type="submit"]
) {
  background-color: buttonface;/* iOS */
  border-radius: 0;
  border: 1px solid #000;
  color: currentColor;
}

/* Standardize border styles on text fields */
:where(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"],
  textarea
) {
  border: 1px solid currentColor;
  border-radius: 0;/* iOS */
}

/* Standardize select menu styles in iOS */
:where(select) {
  color: currentColor;
}

/* Normalize placeholder text style */
/* https://css-tricks.com/almanac/selectors/p/placeholder/#firefox-placeholder-color */
::placeholder {
  color: #595959;/* WCAG AAA compliant gray */
  opacity: 1;/* Firefox */
}

/* Note: File button must be outside of :where() to override browser styles */
::file-selector-button {
  border: 1px solid #000;
  border-radius: 0;
  color: currentColor;
  font-family: inherit;
  font-size: inherit;
}

/* Remove gray background in iOS Safari */
:where([type="search"]) {
  background-color: inherit;
}

/*
  Change the cursor for better usability
  Note: We’re not using :where() since these are unlikely to be overridden, plus
        ::file-selector-button needs specificty >=10 to override the browser styles
*/
button,
label,
select,
[type="button"],
[type="checkbox"],
[type="file"],
[type="radio"],
[type="reset"],
[type="submit"],
[aria-controls],
::file-selector-button {
  cursor: pointer;
}

[aria-busy="true"] {
  cursor: progress;
}

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

[readonly] {
  cursor: text;
}

/* Prevent SVGs in links and buttons from stealing the JS click event */
/* https://css-tricks.com/links-inline-svg-staying-target-events/ */
:where(a svg, button svg) {
  pointer-events: none;
}

/* Keep element hidden even if the “display” property is set to something else */
[hidden] {
  display: none !important;
}