diff --git a/README.md b/README.md index 82b28b3..c678a72 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 @@ -46,7 +44,6 @@ A collection of tips to help take your CSS skills pro. 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) - ### Use a CSS Reset CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. You can use a CSS reset library like [Normalize](http://necolas.github.io/normalize.css/), _et al._, or you can use a more simplified reset approach: @@ -65,11 +62,10 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you #### [Demo](http://codepen.io/AllThingsSmitty/pen/kkrkLL) -**Note:** 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. +**Note:** 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`: @@ -92,7 +88,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: @@ -120,7 +115,6 @@ button { [back to table of contents](#table-of-contents) - ### Use `:not()` to Apply/Unapply Borders on Navigation Instead of putting on the border... @@ -155,7 +149,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. @@ -164,12 +157,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 { @@ -181,7 +170,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`: @@ -198,7 +186,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: @@ -211,7 +198,7 @@ select:focus, textarea:focus { box-shadow: none; outline: #000 dotted 2px; - outline-offset: .05em; + outline-offset: 0.05em; } ``` @@ -219,7 +206,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... @@ -251,7 +237,6 @@ body { } ``` - Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that. **Note:** Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11. @@ -260,7 +245,6 @@ Want to center something else? Vertically, horizontally...anything, anytime, any [back to table of contents](#table-of-contents) - ### Comma-Separated Lists Make list items look like a real, comma-separated list: @@ -277,7 +261,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. @@ -288,7 +271,7 @@ li { } /* select items 1 through 3 and display them */ -li:nth-child(-n+3) { +li:nth-child(-n + 3) { display: block; } ``` @@ -297,7 +280,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; } ``` @@ -306,7 +289,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: @@ -329,7 +311,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: @@ -342,13 +323,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`. -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](http://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: @@ -370,7 +350,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: @@ -387,7 +366,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: @@ -407,7 +385,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: @@ -426,7 +403,6 @@ That's pretty convenient. [back to table of contents](#table-of-contents) - ### Style "Default" Links Add a style for "default" links: @@ -442,7 +418,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: @@ -470,7 +445,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: @@ -508,7 +482,6 @@ Learn more about styling for this pattern in [Ire Aderinokun](https://github.com [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`: @@ -531,7 +504,7 @@ article { } aside .module { - font-size: .9rem; + font-size: 0.9rem; } ``` @@ -539,7 +512,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: @@ -554,14 +526,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); } ``` @@ -577,7 +548,6 @@ body { [back to table of contents](#table-of-contents) - ### Inherit `font` on Form Elements for a Better Mobile Experience Some form controls do not inherit typographical styles by default. To avoid mobile browsers (iOS Safari, _et al_.) from zooming in on HTML form elements when a `