taks-custom-base-css - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

package.json

 {
   "name": "taks-custom-base-css",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "This CSS is built based on Normalize.css. It aims to normalize styles for better cross-browser compatibility and to remove default browser styling.",
@@ -5,0 +5,0 @@ "main": "taks-custom-base.css",

README.md

@@ -17,2 +17,3 @@ # TAK's Custom Base.css
 - Adds transparent borders where necessary to accommodate forced color modes.
+- Prioritizes the use of logical properties to enhance layout direction independence and maintain styling consistency across different writing modes.
 - Supports modern elements and attributes like `dialog`, `search`, `[popover]`, and `[hidden="until-found"]`.
@@ -19,0 +20,0 @@ - Prevents VoiceOver in Safari from recognizing list elements with `list-style: none` as a list by using `list-style-type: ""` to hide them.

taks-custom-base.css

@@ -1,9 +0,14 @@
-/*! TAK's Custom Base.css v1.1.0 | MIT License | github.com/tak-dcxi/taks-custom-base-css */
+/*! TAK's Custom Base.css v1.2.0 | MIT License | github.com/tak-dcxi/taks-custom-base-css */
 
-/*
-  TAK's Custom Base.css Made by TAK - https://www.tak-dcxi.com/
-  This CSS is built based on Normalize.css. (https://necolas.github.io/normalize.css/)
-  It aims to normalize styles for better cross-browser compatibility, remove default browser styling, and enhance usability and accessibility for all users."
-*/
+/* ======================================================
+//
+// TAK's Custom Base.css Made by TAK - https://www.tak-dcxi.com/
+// This CSS is built based on Normalize.css. (https: //necolas.github.io/normalize.css/)
+// It aims to normalize styles for better cross-browser compatibility, remove default browser styling, and enhance usability and accessibility for all users."
+//
+// ====================================================== */
 
+/* ======================================================
+// Universal
+// ------------------------------------------------------ */
 *,
@@ -25,2 +30,21 @@ ::before,
 
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after,
+  ::backdrop {
+    /* Disable animations and transitions for users who prefer reduced motion. */
+    background-attachment: scroll !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0s !important;
+    transition-duration: 1ms !important;
+    animation-duration: 1ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+/* ======================================================
+// Document
+// ------------------------------------------------------ */
 :where(:root) {
@@ -66,2 +90,5 @@ /* Use a common sans-serif font stack for better cross-platform compatibility. */
 
+/* ======================================================
+// Sections
+// ------------------------------------------------------ */
 :where(body) {
@@ -71,7 +98,2 @@ /* 100% of the viewport's block size. */
 
-  /* Remove default margin. */
-  margin: unset;
-}
-
-:where(p, table, blockquote, address, pre, iframe, form, figure, ul, ol, dl) {
   /* Reset default margin. */
@@ -87,7 +109,27 @@ margin: unset;
   font-size: unset;
+}
 
-  /* Reset default font-weight. */
-  font-weight: unset;
+:where(search) {
+  /* Render the `search` element consistently. */
+  display: block flow;
 }
 
+:where(address) {
+  /* Reset default margin. */
+  margin: unset;
+}
+
+:where(address):where(:lang(ja)) {
+  /* Reset font style for specific Japanese language elements. */
+  font-style: normal;
+}
+
+/* ======================================================
+// Grouping content
+// ------------------------------------------------------ */
+:where(p, hr, pre, blockquote, ul, ol, dl, figure) {
+  /* Reset default margin. */
+  margin: unset;
+}
+
 :where(ul, ol) {
@@ -111,2 +153,26 @@ /* Remove default padding. */
 
+/* ======================================================
+// Text-level semantics
+// ------------------------------------------------------ */
+:where(b, strong) {
+  /* Enhance the weight of bold elements for emphasis. */
+  font-weight: 700;
+}
+
+:where(i, cite, em):where(:lang(ja)) {
+  /* Reset font style for specific Japanese language elements. */
+  font-style: normal;
+}
+
+:where(code) {
+  /* Set the monospace font using Tailwind as a reference. (https: //tailwindcss.com/docs/font-family) */
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  /* Reset font size to ensure consistent appearance across different devices. */
+  font-size: unset;
+}
+
+/* ======================================================
+// Links
+// ------------------------------------------------------ */
 :where(:any-link) {
@@ -129,25 +195,27 @@ /* Remove any default background colors. */
 
-:where(b, strong) {
-  font-weight: 700;
+/* ======================================================
+// Edits
+// ------------------------------------------------------ */
+:where(ins) {
+  /* Use a dashed line for underlining inserted content, making it distinctly visible. */
+  text-decoration-style: dashed;
 
-  /* Enhance the weight of bold elements for emphasis. */
+  /* Position the underline slightly away from the text for enhanced legibility. */
+  text-underline-offset: 0.4em;
 }
 
-:where(small) {
-  font-size: 0.8em;
-
-  /* Reduce font size for elements marked as small. */
+:where(del) {
+  /* Apply a double line through the text for deleted content, enhancing visibility. */
+  text-decoration-style: double;
 }
 
-:where(i, cite, em, address):where(:lang(ja)) {
-  /* Reset font style for specific Japanese language elements. */
-  font-style: normal;
-}
+/* ======================================================
+// Embedded content
+// ------------------------------------------------------ */
+:where(img, svg, video, canvas, audio, iframe, embed, object) {
+  /* Set elements to display as block-level flow containers, suitable for complex layouts. */
+  display: block flow;
 
-:where(code) {
-  /* Set the monospace font using Tailwind as a reference. (https: //tailwindcss.com/docs/font-family) */
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-
-  /* Reset font size to ensure consistent appearance across different devices. */
-  font-size: unset;
+  /* Align these elements vertically to the middle of their containing line. */
+  vertical-align: middle;
 }
@@ -163,27 +231,39 @@
 
-:where(img) {
-  /* Aligns images to the bottom of their line box. */
-  vertical-align: bottom;
+/* ======================================================
+// Tabular data
+// ------------------------------------------------------ */
+:where(table) {
+  /* Remove default margin. */
+  margin: unset;
+
+  /* Collapses border for a more compact table design. */
+  border-collapse: collapse;
 }
 
-:where(svg) {
-  /* Aligns SVGs to the baseline of their line box. */
-  vertical-align: baseline;
+:where(caption) {
+  /* Aligns the caption text to the start of the element. */
+  text-align: start;
 }
 
-:where(iframe) {
-  /* Sets iframe to display as block-level flow root. */
-  display: block flow;
+:where(td, th) {
+  /* Removes default padding from table cells and headers. */
+  padding: unset;
+
+  /* Aligns content of table cells to the top. */
+  vertical-align: top;
 }
 
-:where(button, [type='button'], [type='reset'], [type='submit']),
-::file-selector-button {
-  /* Set the inline-size of the button to match the content's inline-size exactly */
-  inline-size: fit-content;
+:where(th) {
+  /* Makes table header text bold. */
+  font-weight: 700;
 
-  /* Optimizes touch interaction for buttons. */
-  touch-action: manipulation;
+  /* Aligns header text to the start of the cell. */
+  text-align: start;
 }
 
-:where(button, input, optgroup, select, textarea), ::file-selector-button {
+/* ======================================================
+// Forms
+// ------------------------------------------------------ */
+:where(button, input, optgroup, select, textarea),
+::file-selector-button {
   /* Removes default margin. */
@@ -224,41 +304,26 @@ margin: unset;
 :where(textarea) {
-  /* Allows resizing of textarea vertically only */
+  /* Allows resizing of textarea vertically only. */
   resize: block;
 }
 
-::placeholder {
-  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default */
-  opacity: initial;
+:where([type='file']) {
+  /* Default cursor for file input fields. */
+  cursor: auto;
 }
 
-:where(:any-link,
-  button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'],
-  label[for],
-  select,
-  summary,
-  [role='tab'],
-  [role='button']) {
-  /* Indicate clickable elements with a pointer cursor. */
-  cursor: pointer;
-}
+:where(button, [type='button'], [type='reset'], [type='submit']),
+::file-selector-button {
+  /* Set the inline-size of the button to match the content's inline-size exactly. */
+  inline-size: fit-content;
 
-:where(input[type='file']) {
-  /* Default cursor for file input fields. */
-  cursor: auto;
+  /* Optimizes touch interaction for buttons. */
+  touch-action: manipulation;
 }
 
-:where(input[type='file'])::-webkit-file-upload-button,
-:where(input[type='file'])::file-selector-button {
-  /* Indicate that the file upload buttons are clickable. */
+:where(button, [type='button'], [type='reset'], [type='submit'], label[for], select, [role='tab'], [role='button']),
+::file-selector-button {
+  /* Indicate clickable elements with a pointer cursor. */
   cursor: pointer;
 }
 
-:where(:disabled) {
-  /* Show default cursor for disabled elements to reflect their non-interactive state. */
-  cursor: default;
-}
-
 :where(select:disabled) {
@@ -275,30 +340,33 @@ /* Keep the opacity of disabled selects consistent with other disabled elements. */
 :where(fieldset) {
-  /* Remove default margin for a more compact layout. */
+  /* Remove default margin. */
   margin: unset;
+}
 
-  /* Remove default padding for a more compact layout. */
-  padding: unset;
+:where(fieldset[role]) {
+  /* When the <fieldset>element has a 'role' attribute, it does not generate a box. */
+  display: contents;
 }
 
 :where(legend) {
-  /* Remove default padding for a more compact layout. */
+  /* Remove default padding. */
   padding: unset;
 }
 
-:where([type='search']) {
-  /* Tighten the outline around search inputs for better visual feedback. */
-  outline-offset: -2px;
+::placeholder {
+  /* Normalize the opacity of placeholder text to fully opaque in Firefox, where it might be set to less by default. */
+  opacity: initial;
 }
 
-:where([type='search'])::-webkit-search-decoration {
-  /* Remove default decoration from search inputs to simplify their appearance. */
-  appearance: none;
-}
-
+/* ======================================================
+// Interactive elements
+// ------------------------------------------------------ */
 :where(summary) {
   /* Eliminate the default marker from details summary for a cleaner disclosure widget. */
   display: block flow;
+
+  /* Indicate clickable elements with a pointer cursor. */
+  cursor: pointer;
 }
 
-:where(summary)::-webkit-details-marker {
+::-webkit-details-marker {
   /* Hide the default disclosure marker to allow for custom styling. */
@@ -308,57 +376,25 @@ display: none;
 
-:where(table) {
-  /* Collapses border for a more compact table design */
-  border-collapse: collapse;
-}
-
-:where(caption) {
-  /* Aligns the caption text to the start of the element */
-  text-align: start;
-}
-
-:where(td, th) {
-  /* Removes default padding from table cells and headers */
-  padding: unset;
-
-  /* Aligns content of table cells to the top */
-  vertical-align: top;
-}
-
-:where(th) {
-  font-weight: 700;
-
-  /* Makes table header text bold */
-  text-align: start;
-
-  /* Aligns header text to the start of the cell */
-}
-
-:where(search) {
-  /* Sets search elements to display as block-level flow root */
-  display: block flow;
-}
-
 :where(dialog) {
-  /* Resets overflow property */
+  /* Resets overflow property. */
   overflow: unset;
 
-  /* Resets the inline size property */
+  /* Resets the inline size property. */
   inline-size: unset;
 
-  /* Resets the block size property */
+  /* Resets the block size property. */
   block-size: unset;
 
-  /* Resets the max inline size limit */
+  /* Resets the max inline size limit. */
   max-inline-size: unset;
 
-  /* Resets the max block size limit */
+  /* Resets the max block size limit. */
   max-block-size: unset;
 
-  /* Removes default padding */
+  /* Removes default padding. */
   padding: unset;
 
-  /* Removes default background color */
+  /* Removes default background color. */
   background-color: unset;
 
-  /* Resets color to default */
+  /* Resets color to default. */
   color: unset;
@@ -368,18 +404,18 @@ }
 :where([popover]) {
-  /* Resets overflow property */
+  /* Resets overflow property. */
   overflow: unset;
 
-  /* Resets the inline size property */
+  /* Resets the inline size property. */
   inline-size: unset;
 
-  /* Resets the block size property */
+  /* Resets the block size property. */
   block-size: unset;
 
-  /* Removes default padding */
+  /* Removes default padding. */
   padding: unset;
 
-  /* Removes default background color */
+  /* Removes default background color. */
   background-color: unset;
 
-  /* Resets color to default */
+  /* Resets color to default. */
   color: unset;
@@ -390,5 +426,8 @@ }
   /* Remove default backdrop color for a clearer view of the underlying content. */
-  background-color: transparent;
+  background-color: unset;
 }
 
+/* ======================================================
+// Focus styles
+// ------------------------------------------------------ */
 :where(:-moz-focusring) {
@@ -414,2 +453,10 @@ /* Improve outlines for Firefox and unify style with input elements & buttons. */
 
+/* ======================================================
+// Misc
+// ------------------------------------------------------ */
+:where(:disabled) {
+  /* Show default cursor for disabled elements to reflect their non-interactive state. */
+  cursor: default;
+}
+
 [hidden]:not([hidden='until-found']) {
@@ -419,18 +466,1 @@ /* Ensure elements intended to be hidden are not displayed, enhancing clarity and layout control. */
 }
-
-@media (prefers-reduced-motion: reduce) {
-
-  *,
-  ::before,
-  ::after,
-  ::backdrop {
-    /* Disable animations and transitions for users who prefer reduced motion. */
-    background-attachment: scroll !important;
-    scroll-behavior: auto !important;
-    transition-delay: 0s !important;
-    transition-duration: 1ms !important;
-    animation-duration: 1ms !important;
-    animation-delay: 0s !important;
-    animation-iteration-count: 1 !important;
-  }
-}

No alert changes

Improved metrics

Total package byte prevSize

16590

13.91%

Lines of code

353

10.31%

Number of lines in readme file

53

1.92%

No dependency changes