npm - uaplus - Versions diffs - 0.3.0 - Mend

uaplus 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,13 @@
+# UA+
+UA+ (User agent plus) is a different type of reset style sheet. Instead of mostly resetting and normalizing properties, we focus on improving existing user agent styles and adding new styles only where browsers fall short.
+Please note that this project is still in the early alpha phase. Feedback is highly appreciated.
+## Who is this for?
+UAplus is for anyone who wants a better baseline for their style sheets. It does more than other reset style sheets but less than most. Most importantly, we try not to be too opinionated and reset too much. We also take accessibility more into consideration than many others.
+## Demo
+Visit our [demo pages](https://fokus.dev/tools/uaplus/demo/) to compare your browsers' default styles with our improved ones. Please note that the differences are often barely noticeable. That's because we like the default styles and only help out browsers where needed.

package/image.jpg ADDED Viewed

Binary file

package/package.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "name": "uaplus",
+  "version": "0.3.0",
+  "description": "User agent styles improvements",
+  "keywords": [
+    "css"
+  ],
+  "homepage": "https://github.com/fokus-dev/uaplus#readme",
+  "bugs": {
+    "url": "https://github.com/fokus-dev/uaplus/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fokus-dev/uaplus.git"
+  },
+  "license": "ISC",
+  "author": "Manuel Matuzovic",
+  "type": "commonjs",
+  "main": "index.js"
+}

package/test.html ADDED Viewed

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tests</title>
+  <link rel="stylesheet" href="uaplus.css">
+</head>
+<body>
+  <h1>Tests</h1>
+  <h2>Box Sizing</h2>
+  <div style="width: 100%; border: 10px solid;">A</div>
+  <h2>Focus</h2>
+  <button>A Button</button>
+  <p>Lorem ipsum dolor sit amet <a href="#">consectetur</a> adipisicing elit. Velit deserunt fugit voluptatem quia eveniet voluptatum voluptates quos dolores cum! Consectetur quis cupiditate quidem ea delectus! Tempore magnam dolor pariatur distinctio.</p>
+  <h2>Text</h2>
+  <p>
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam optio reprehenderit magnam voluptatem modi, quisquam tenetur aspernatur harum, neque, repellendus perspiciatis? Voluptates totam praesentium autem ducimus pariatur, eligendi cupiditate quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptatum excepturi deserunt facere accusamus sunt aliquam? Ducimus doloribus obcaecati veritatis accusantium odio fugit dolor dolores harum optio. Amet, distinctio eum! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod ratione quo labore, itaque repudiandae, explicabo quia iure debitis tempore libero cupiditate adipisci accusantium fugiat unde. Quam at asperiores repellendus vero.
+  </p>
+  <h2>Headings</h2>
+  <section>
+    <h1>Heading</h1>
+    <section>
+      <h1>Heading</h1>
+      <section>
+        <h1>Heading</h1>
+      </section>
+    </section>
+  </section>
+  <h2>Abbreviation</h2>
+  <p>
+    <abbr title="Hypertext Markup Language">HTML</abbr>
+  </p>
+  <h2>Image</h2>
+  <img src="image.jpg" alt="">
+  <h2>iframe</h2>
+  <iframe width="2200" height="650" src="https://www.youtube.com/embed/TA5lHC8kAyk?si=Yo1IVg_ykcOQxw2r" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+  <h2>fieldset</h2>
+  <fieldset>
+    <legend>
+      My test
+    </legend>
+    <!-- <button style="width: 2000px">Send</button> -->
+  </fieldset>
+  <h2>labels</h2>
+  <p>
+    <label for="name">name</label>
+    <input type="text" id="name">
+  </p>
+  <p>
+    <label for="option">name</label>
+    <input type="radio" id="option">
+  </p>
+  <p>
+    <input type="radio" id="option2">
+    <label for="option2">name</label>
+  </p>
+  <h2>labels</h2>
+  <textarea name="" id=""></textarea>
+  <h2>search</h2>
+  <input type="search">
+  <h2>text in form fields</h2>
+  <button>Heyo</button>
+  <input type="text" value="This is a test">
+  <select name="" id="">
+    <option value="">text</option>
+  </select>
+  <h2>rtl input fields</h2>
+  <p>
+    <label for="tel">Tel (ltr)</label>
+    <input type="tel" placeholder="86754309" id="tel">
+  </p>
+  <p>
+    <label for="tel2">Tel with value (ltr)</label>
+    <input type="tel" value="test" placeholder="86754309" id="tel2">
+  </p>
+  <p>
+    <label for="tel-rtl">Tel (rtl)</label>
+    <input type="tel" dir="rtl" placeholder="86754309" id="tel-rtl">
+  </p>
+  <p>
+    <label for="tel-rtl2">Tel with value (rtl)</label>
+    <input type="tel" value="test" dir="rtl" placeholder="86754309" id="tel-rtl2">
+  </p>
+  <h2>tables</h2>
+  <table>
+    <tr>
+      <th>Q1</th>
+      <th>Q2</th>
+      <th>Q3</th>
+      <th>Q4</th>
+    </tr>
+    <tr>
+      <td>100<br>20</td>
+      <td>40</td>
+      <td>30</td>
+      <td>400</td>
+    </tr>
+    <tr>
+      <td>20</td>
+      <td>10</td>
+      <td>8</td>
+      <td>100</td>
+    </tr>
+  </table>
+  <h2>dialogs</h2>
+  <button commandfor="my-modal1" command="show-modal">
+  Show modal
+  </button>
+  <dialog id="my-modal1" closedby="any">
+    <button command="close" commandfor="my-modal1">close</button>
+    <h1>My modal</h1>
+  </dialog>
+  <h2>popovers</h2>
+  <button popovertarget="mypopover">Toggle the popover</button>
+  <div id="mypopover" popover>Popover content</div>
+  <h2>hidden</h2>
+  <div hidden style="display: block">Hidden</div>
+  <h2>summary</h2>
+  <details>
+    <summary>More info</summary>
+    <p>This is the hidden info</p>
+  </details>
+</body>
+</html>

package/uaplus.css ADDED Viewed

@@ -0,0 +1,309 @@
+/**
+ * uaplus.css version 0.3.0
+ */
+/**
+ * Wrapping everything in an anonymous layer ensures that selectors
+ * in UA+ have the lowest specificty or the highest when using
+ * !important.
+ */
+@layer {
+	/**
+   * Different box model
+   *
+   * We use the traditional box model, where the padding and border
+   * of the element is drawn inside and not outside the specified
+   * width and height. That makes combining relative and absolute
+   * units in properties like <code>inline-size</code> and
+   * <code>block-size</code> easier.
+   *
+   * See https://en.wikipedia.org/wiki/CSS_box_model
+   */
+	*,
+	*::after,
+	*::before {
+		box-sizing: border-box;
+	}
+	/**
+   * Improve focus styles
+   *
+   * Add spacing between content and its focus outline.
+   */
+	:focus-visible {
+		outline-offset: 3px;
+	}
+	/**
+   * Disable text size adjustment
+   *
+   * To improve readability on non-mobile optimized websites, browsers
+   * like mobile Safari increase the default font size when you switch
+   * a website from portrait to landscape. We don't want that for our
+   * optimized sites.
+   *
+   * See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
+   */
+	html {
+		-webkit-text-size-adjust: none;
+		text-size-adjust: none;
+	}
+	/**
+   * Increase line height
+   *
+   * Long paragraphs are easier to read if the line height is higher.
+   */
+	html {
+		line-height: 1.5;
+	}
+	/**
+   * Add scrollbar gutter
+   *
+   * Prevent the page from “jumping” when switching from a long to a short page.
+   *
+   */
+	html {
+		scrollbar-gutter: stable;
+	}
+	/**
+   * Remove UA styles for h1s nested in sectioning content
+   *
+   * Nesting h1s in section, articles, etc., shouldn't influence the
+   * styling of the heading since nesting doesn't influence
+   * semantics either.
+   *
+   * See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
+   * See https://github.com/whatwg/html/pull/11102
+   * See https://html.spec.whatwg.org/#sections-and-headings
+   */
+	h1 {
+		font-size: 2em;
+		margin-block: 0.67em;
+	}
+	/**
+   * Improve abbreviations with titles
+   *
+   * The abbr element with the title isn't helpful regarding
+   * accessibility because support is inconsistent, and it's only
+   * accessible to some users. Still, it's commonly used.
+   * This rule shows a dotted underline on abbreviations in all
+   * browsers (there's a bug in Safari) and changes the cursor.
+   *
+   * See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
+   */
+	abbr[title] {
+		cursor: help;
+		text-decoration-line: underline;
+		text-decoration-style: dotted;
+	}
+	/**
+   * Optimize mark element in Forced Colors Mode
+   *
+   * The colors of the mark element don't change in Forced Colors Mode,
+   * which can be problematic. Use system colors instead.
+   *
+   * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
+   */
+	@media (forced-colors: active) {
+		mark {
+			color: HighlightText;
+			background-color: Highlight;
+		}
+	}
+	/**
+   * Avoid overflow caused by embedded content
+   *
+   * Ensure that embedded content (audio, video, images, etc.)
+   * doesn't overflow its container.
+   */
+	audio,
+	iframe,
+	img,
+	svg,
+	video {
+		max-block-size: 100%;
+		max-inline-size: 100%;
+	}
+	/**
+   * Prevent fieldsets from causing overflow
+   *
+   * Reset the default `min-inline-size: min-content` to prevent
+   * children from stretching fieldsets
+   *
+   * See https://github.com/twbs/bootstrap/issues/12359
+   * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+   */
+	fieldset {
+		min-inline-size: 0;
+	}
+	/**
+   * Turn labels into block elements
+   *
+   * Labels for inputs, selects, and textarea should be block
+   * elements.
+   */
+	label:has(+ input:not([type="radio"], [type="checkbox"]), select, textarea) {
+		display: block;
+	}
+	/**
+   * Increase the block-size of textareas
+   *
+   * The default height of textareas is small. We increase it a bit.
+   */
+	textarea:not([rows]) {
+		min-block-size: 6em;
+	}
+	/**
+   * Inherit font styling in form elements
+   *
+   * buttons, inputs, selects, and textarea should have the same font
+   * family and size as the rest of the page.
+   */
+	button,
+	input,
+	select,
+	textarea {
+		font-family: inherit;
+		font-size: inherit;
+	}
+	/**
+   * Normalize search input styles
+   *
+   * Remove the rounded corners of search inputs on macOS and IOS
+   * and normalize the background color
+   */
+	[type="search"] {
+		-webkit-appearance: textfield;
+	}
+	/* iOS only */
+	@supports (-webkit-touch-callout: none) {
+		[type="search"] {
+			border: 1px solid -apple-system-secondary-label;
+			background-color: canvas;
+		}
+	}
+	/**
+   * Maintain direction in some input types
+   *
+   * Some input types should remain left-aligned in right-to-left
+   * languages,but only if the value isn't empty because the
+   * placeholder should be right-aligned.
+   *
+   * See https://rtlstyling.com/posts/rtl-styling#form-inputs
+   */
+	input:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
+		direction: ltr;
+	}
+	/**
+   * Improve table styling
+   *
+   * With the default styling, tables are hard to scan. These rules
+   * add padding and collapsed borders.
+   */
+	table {
+		border-collapse: collapse;
+		border: 1px solid;
+	}
+	th,
+	td {
+		border: 1px solid;
+		padding: 0.25em 0.5em;
+		vertical-align: top;
+	}
+	/**
+   * Fading dialogs
+   *
+   * Add fade in and fade out transitions for the dialog element
+   * and backdrops
+   */
+	dialog::backdrop {
+		background: oklch(0% 0 0 / 0.3);
+	}
+	dialog,
+	[popover],
+	dialog::backdrop {
+		opacity: 0;
+		transition: opacity 150ms ease-out, display 150ms allow-discrete,
+			overlay 150ms allow-discrete;
+	}
+	dialog[open],
+	:popover-open,
+	dialog[open]::backdrop {
+		opacity: 1;
+	}
+	@starting-style {
+		dialog[open],
+		:popover-open,
+		dialog[open]::backdrop {
+			opacity: 0;
+		}
+	}
+	/**
+   * Increase specificity of [hidden]
+   *
+   * Make it harder to accidentally unhide elements with the
+   * [hidden] attribute while still maintaining the until-found
+   * functionality.
+   */
+	[hidden]:not([hidden="until-found"]) {
+		display: none !important;
+	}
+	/**
+   * Turn images into block elements
+   */
+	img {
+		display: block;
+	}
+	/**
+   * Change cursor of <summary>
+   *
+   * By default, only the ::marker inside the summary uses the
+   * default cursor.
+   */
+	summary {
+		cursor: default;
+	}
+	/**
+   * Remove the default border from iframes
+   */
+	iframe {
+		border: none;
+	}
+  /**
+   * By default popovers look like modals without a backdrop.
+   * This makes use of the implicit anchor in popvers to position
+   * it closely to the trigger.
+   */
+  @supports(position-area: end) {
+    [popover] {
+      margin: 0;
+      position-area: end span-end;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    }
+  }
+}