Aller au contenu

Normalize

Ce contenu n’est pas encore disponible dans votre langue.

OxyProps Normalize is a normalize based on Open Props normalize, using the framework CSS custom properties. It applies minimal styles for all standard HTML elements to make them consistent with your theme. And it is adaptive to light and dark.

The OxyProps normalize uses :where() selectors resulting in zero specificity so you will always be able to override these values.

Normalized HTML5 Elements

link Normalized HTML5 Elements
TextEmbedded contentForm elements
HeadingsImagesInput fields
ParagraphsAudioSelect menus
BlockquotesVideoCheckboxes
ListsCanvasRadio buttons
Horizontal rulesMeterTextareas
Tabular dataProgressHTML5 inputs
CodeInline SVGAction buttons
Inline elementsIFrames
HTML Comments

<html> element

link &lt;html&gt; element

Sets the default color scheme to light and the background color to --o-surface-1.
This color adapts to light and dark modes.

:where(html) {
  color-scheme: light;
  background-color: var(--o-surface-1);
}

For theme consistency, sets the default accent-colorand caret-color to brand, your selected brand color.
The accent-color CSS property defines the accent color for html elements like checkboxes or radios. The caret-color CSS property defines cursor color where user can input text.

:where(html) {
  accent-color: var(--o-brand);
  caret-color: var(--o-brand);
}

For theme consistency, sets the scrollbar-color to your canvas color with --o-scrollbar-color for the thumb, and transparent for the track.

:where(html) {
  scrollbar-color: var(--o-scrollbar-color) transparent;
}

Fixes a bad behavior on mobile iOS. See this article by Kilian Valkhof

:where(html) {
  -webkit-text-size-adjust: none;
}

Sets the default font family to the --o-font-sans safe sans serif font stack.

:where(html) {
  font-family: var(--o-font-sans);
}

Sets block-size to 100%. block-size is a logical CSS property that defines the horizontal or vertical size of an element’s block, depending on its writing mode.

:where(html) {
  block-size: 100%;
}

The <dt> element : Description Term

link The &lt;dt&gt; element : Description Term

c,kzldnvz