@microflash/preset - npm Package Versions

[3.1.0] - 2024-02-25

Added

• New transition-timing-function for outline-offset based on linear() easing function for supported browsers

[3.0.0] - 2024-02-25

Changed

• Breaking Change: stroke-color is no longer being set on SVGs (mainly to allow design systems to enforce this on icon sets and illustrations). This also removes support for --preset-stroke-color property.

[2.0.0] - 2024-01-15

Changed

• Breaking Change: Media elements (img, svg, canvas, audio, video, iframe, embed, object) are no longer forced to display: block. Instead, a gentler set of opinions are now applied on them. See 08876402115d8467a6916d1a02154e864edb8f14

[1.5.1] - 2024-01-15

Changed

• Reset now excludes SVGs with class attribute
• cursor: not-allowed is now applied on input[type=image][disabled] elements as well

[1.5.0] - 2024-01-15

Added

• Enables smooth scrolling for nested scrollable elements
• Hangs the punctuations outside the line box

Changed

• Sets margin: 0 for every element except dialog
• Removes display: hidden on elements that are hidden until found

[1.0.3] - 2023-10-22

Added

• A min-block-size for textareas with no rows attribute to make sure they are not tiny

[1.0.2] - 2023-10-22

Added

• text-wrap: pretty on paragraph elements

[1.0.1] - 2023-08-25

Removed

• display: none for undefined custom elements

Depending on your browser targets, you can do the following instead.

• Use Declarative Shadow DOM and polyfill it in unsupported browsers, or
• Hide the element visually (using visibility: hidden) until JavaScripts loads

  /* no visibility for undefined custom elements by default */
  :not(:defined) {
    visibility: hidden;
  }
  

[1.0.0] - 2023-07-27

Added

• display: none for undefined custom elements to prevent rendering them prematurely.
• text-wrap: balance for headings for more elegant handling of widows; see https://ishadeed.com/article/css-text-wrap-balance/
• display: list-item for summary element
• Default backdrop blur on dialog element
• Document overflow is now hidden when dialog is open (experimental)
• Table captions are now positioned at bottom by default

Changed

• box-sizing for every element is set to border-box; earlier it was inheriting from parent (leading to unintended behavior in children due to cascade)
• Stroke customization is applied only on SVGs without fill; earlier it was being applied to all SVGs.

Removed

• font-smoothing has been removed; see https://www.zachleat.com/web/font-smooth/
• list-style: none for lists with [role=list]

API

Some of the properties in the reset are now customizable through CSS properties. You can define these properties in :root or html scope.

• --preset-line-height to override the line-height (fallback value: calc(0.3rem + 2ex + 0.3rem))
• --preset-tab-size to control the indentation width of code block tabs (fallback value: 2)
• --preset-stroke-color to override the stroke color of SVG with no fill (fallback value: currentColor)
• --preset-dialog-backdrop-filter to override the backdrop filter of the dialog (fallback value: blur(25px))
• --preset-table-caption-side to customize caption position of a table caption (fallback value: bottom)