diff --git a/README.md b/README.md index a6353d9..e723033 100644 --- a/README.md +++ b/README.md @@ -8,14 +8,12 @@ A collection of tips to help take your CSS skills pro. > For other great lists check out [@sindresorhus](https://github.com/sindresorhus/)'s curated list of [awesome lists](https://github.com/sindresorhus/awesome/). - ## Table of Contents -* [Protips](#protips) -* [Support](#support) -* [Translations](#translations) -* [Contribution Guidelines](CONTRIBUTING.md) - +- [Protips](#protips) +- [Support](#support) +- [Translations](#translations) +- [Contribution Guidelines](CONTRIBUTING.md) ## Protips @@ -47,7 +45,7 @@ A collection of tips to help take your CSS skills pro. 1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events) 1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing) 1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements) - +1. [Text truncated with an ellipsis](#text-truncated-with-an-ellipsis) ### Use a CSS Reset @@ -68,11 +66,10 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you #### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL) > [!TIP] -> If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in your CSS reset. +> If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in your CSS reset. [back to table of contents](#table-of-contents) - ### Inherit `box-sizing` Let `box-sizing` be inherited from `html`: @@ -95,7 +92,6 @@ This makes it easier to change `box-sizing` in plugins or other components that [back to table of contents](#table-of-contents) - ### Use `unset` Instead of Resetting All Properties When resetting an element's properties, it's not necessary to reset each individual property: @@ -121,7 +117,6 @@ button { [back to table of contents](#table-of-contents) - ### Use `:not()` to Apply/Unapply Borders on Navigation Instead of putting on the border... @@ -156,7 +151,6 @@ Here, the CSS selector is read as a human would describe it. [back to table of contents](#table-of-contents) - ### Check if Font Is Installed Locally You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too. @@ -165,12 +159,8 @@ You can check if a font is installed locally before fetching it remotely, which @font-face { font-family: "Dank Mono"; src: - /* Full name */ - local("Dank Mono"), - /* Postscript name */ - local("Dank Mono"), - /* Otherwise, download it! */ - url("//...a.server/fonts/DankMono.woff"); + /* Full name */ local("Dank Mono"), /* Postscript name */ local("Dank Mono"), + /* Otherwise, download it! */ url("//...a.server/fonts/DankMono.woff"); } code { @@ -182,7 +172,6 @@ H/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argylei [back to table of contents](#table-of-contents) - ### Add `line-height` to `body` You don't need to add `line-height` to each `

`, ``, _et al_. separately. Instead, add it to `body`: @@ -199,7 +188,6 @@ This way textual elements can inherit from `body` easily. [back to table of contents](#table-of-contents) - ### Set `:focus` for Form Elements Sighted keyboard users rely on focus to determine where keyboard events go in the page. Make focus for form elements stand out and consistent than a browser's default implementation: @@ -212,7 +200,7 @@ select:focus, textarea:focus { box-shadow: none; outline: #000 dotted 2px; - outline-offset: .05em; + outline-offset: 0.05em; } ``` @@ -220,7 +208,6 @@ textarea:focus { [back to table of contents](#table-of-contents) - ### Vertically-Center Anything No, it's not black magic, you really can center elements vertically. You can do this with flexbox... @@ -255,7 +242,6 @@ body { [back to table of contents](#table-of-contents) - ### Use `aspect-ratio` Instead of Height/Width The `aspect-ratio` property allows you to easily size elements and maintain consistent width-to-height ratio. This is incredibly useful in responsive web design to prevent layout shift. Use `object-fit` with it to prevent disrupting the layout if the height/width values of images changes. @@ -273,7 +259,6 @@ Learn more about the `aspect-ratio` property in this [web.dev post](https://web. [back to table of contents](#table-of-contents) - ### Comma-Separated Lists Make list items look like a real, comma-separated list: @@ -291,7 +276,6 @@ Use the `:not()` pseudo-class and no comma will be added to the last item. [back to table of contents](#table-of-contents) - ### Select Items Using Negative `nth-child` Use negative `nth-child` in CSS to select items 1 through n. @@ -302,7 +286,7 @@ li { } /* select items 1 through 3 and display them */ -li:nth-child(-n+3) { +li:nth-child(-n + 3) { display: block; } ``` @@ -311,7 +295,7 @@ Or, since you've already learned a little about [using `:not()`](#use-not-to-app ```css /* select all items except the first 3 and display them */ -li:not(:nth-child(-n+3)) { +li:not(:nth-child(-n + 3)) { display: block; } ``` @@ -320,7 +304,6 @@ li:not(:nth-child(-n+3)) { [back to table of contents](#table-of-contents) - ### Use SVG for Icons There's no reason not to use SVG for icons: @@ -344,7 +327,6 @@ SVG scales well for all resolution types and is supported in all browsers [back [back to table of contents](#table-of-contents) - ### Use the "Lobotomized Owl" Selector It may have a strange name but using the universal selector (`*`) with the adjacent sibling selector (`+`) can provide a powerful CSS capability: @@ -358,13 +340,12 @@ It may have a strange name but using the universal selector (`*`) with the adjac In this example, all elements in the flow of the document that follow other elements will receive `margin-top: 1.5em`. > [!TIP] -> For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on *A List Apart*. +> For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on _A List Apart_. #### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq) [back to table of contents](#table-of-contents) - ### Use `max-height` for Pure CSS Sliders Implement CSS-only sliders using `max-height` with overflow hidden: @@ -386,7 +367,6 @@ The element expands to the `max-height` value on hover and the slider displays a [back to table of contents](#table-of-contents) - ### Equal-Width Table Cells Tables can be a pain to work with. Try using `table-layout: fixed` to keep cells at equal width: @@ -403,7 +383,6 @@ Pain-free table layouts. [back to table of contents](#table-of-contents) - ### Get Rid of Margin Hacks With Flexbox When working with column gutters you can get rid of `nth-`, `first-`, and `last-child` hacks by using flexbox's `space-between` property: @@ -423,7 +402,6 @@ Now column gutters always appear evenly-spaced. [back to table of contents](#table-of-contents) - ### Use Attribute Selectors with Empty Links Display links when the `` element has no text value but the `href` attribute has a link: @@ -443,7 +421,6 @@ That's really convenient. [back to table of contents](#table-of-contents) - ### Control Specificity Better with `:is()` The `:is()` pseudo-class is used to target multiple selectors at once, reducing redundancy and enhancing code readability. This is incredibly useful for writing large selectors in a more compact form. @@ -457,10 +434,30 @@ The `:is()` pseudo-class is used to target multiple selectors at once, reducing The above ruleset is equivalent to the following number selector rules... ```css -section h1, section h2, section h3, section h4, section h5, section h6, -article h1, article h2, article h3, article h4, article h5, article h6, -aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, -nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { +section h1, +section h2, +section h3, +section h4, +section h5, +section h6, +article h1, +article h2, +article h3, +article h4, +article h5, +article h6, +aside h1, +aside h2, +aside h3, +aside h4, +aside h5, +aside h6, +nav h1, +nav h2, +nav h3, +nav h4, +nav h5, +nav h6 { color: green; } ``` @@ -469,7 +466,6 @@ nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { [back to table of contents](#table-of-contents) - ### Style "Default" Links Add a style for "default" links: @@ -485,7 +481,6 @@ Now links that are inserted via a CMS, which don't usually have a `class` attrib [back to table of contents](#table-of-contents) - ### Intrinsic Ratio Boxes To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div: @@ -513,7 +508,6 @@ Using 20% for padding makes the height of the box equal to 20% of its width. No [back to table of contents](#table-of-contents) - ### Style Broken Images Make broken images more aesthetically-pleasing with a little bit of CSS: @@ -552,7 +546,6 @@ img::after { [back to table of contents](#table-of-contents) - ### Use `rem` for Global Sizing; Use `em` for Local Sizing After setting the base font size at the root (`html { font-size: 100%; }`), set the font size for textual elements to `em`: @@ -575,7 +568,7 @@ article { } aside .module { - font-size: .9rem; + font-size: 0.9rem; } ``` @@ -583,7 +576,6 @@ Now each module becomes compartmentalized and easier to style, more maintainable [back to table of contents](#table-of-contents) - ### Hide Autoplay Videos That Aren't Muted This is a great trick for a custom user stylesheet. Avoid overloading a user with sound from a video that autoplays when the page is loaded. If the sound isn't muted, don't show the video: @@ -598,14 +590,13 @@ Once again, we're taking advantage of using the [`:not()`](#use-not-to-applyunap [back to table of contents](#table-of-contents) - ### Use `:root` for Flexible Type The type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using `:root`: ```css :root { - font-size: calc(1vw + 1vh + .5vmin); + font-size: calc(1vw + 1vh + 0.5vmin); } ``` @@ -621,7 +612,6 @@ body { [back to table of contents](#table-of-contents) - ### Set `font-size` on Form Elements for a Better Mobile Experience To avoid mobile browsers (iOS Safari, _et al_.) from zooming in on HTML form elements when a `