diff --git a/README.md b/README.md index 82b28b3..66bbd24 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 @@ -45,7 +43,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. [Use `:valid` or `:invalid` CSS Selector to validate HTML Input Elements](#use-valid-or-invalid-css-selector-to-validate-html-input-elements) ### Use a CSS Reset @@ -65,11 +63,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 +89,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 +116,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,25 +150,20 @@ 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. ```css @font-face { - font-family: "Dank Mono"; + 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 { - font-family: "Dank Mono", system-ui-monospace; + font-family: 'Dank Mono', system-ui-monospace; } ``` @@ -181,7 +171,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 +187,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 +199,7 @@ select:focus, textarea:focus { box-shadow: none; outline: #000 dotted 2px; - outline-offset: .05em; + outline-offset: 0.05em; } ``` @@ -219,7 +207,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 +238,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,14 +246,13 @@ 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: ```css ul > li:not(:last-child)::after { - content: ","; + content: ','; } ``` @@ -277,7 +262,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 +272,7 @@ li { } /* select items 1 through 3 and display them */ -li:nth-child(-n+3) { +li:nth-child(-n + 3) { display: block; } ``` @@ -297,7 +281,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,14 +290,13 @@ 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: ```css .logo { - background: url("logo.svg"); + background: url('logo.svg'); } ``` @@ -329,7 +312,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 +324,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 +351,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 +367,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,13 +386,12 @@ 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: ```css -a[href^="http"]:empty::before { +a[href^='http']:empty::before { content: attr(href); } ``` @@ -426,7 +404,6 @@ That's pretty convenient. [back to table of contents](#table-of-contents) - ### Style "Default" Links Add a style for "default" links: @@ -442,7 +419,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 +446,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: @@ -498,7 +473,7 @@ img::before { } img::after { - content: "(url: " attr(src) ")"; + content: '(url: ' attr(src) ')'; display: block; font-size: 12px; } @@ -508,7 +483,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 +505,7 @@ article { } aside .module { - font-size: .9rem; + font-size: 0.9rem; } ``` @@ -539,7 +513,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 +527,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 +549,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 ` +``` + +CSS + +```css +input[type='email']:valid { + border: 1px solid green; +} +``` + +```css +input[type='email']:invalid { + border: 1px solid red; +} +``` + +If you want to validate a phone number input, you can use `:valid` or `:invalid` css selector with HTML Pattern attribute like this: + +HTML + +```html + +``` + +CSS + +```css +input[type='tel']:valid { + border: 1px solid green; +} +``` + +```css +input[type='tel']:invalid { + border: 1px solid red; +} +``` + +Learn more about [:valid CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid) and [:invalid CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid). + +[back to table of contents](#table-of-contents) ## Support @@ -646,25 +668,24 @@ Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11. [back to table of contents](#table-of-contents) - ## Translations **Note:** I've had less time available to maintain the growing list of translated tips; adding a new tip requires including it with over a dozen translations. For that reason, translated README files may not include all the tips listed on the main README file. -* [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN) -* [正體中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW) -* [Deutsch](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/de-DE) -* [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES) -* [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR) -* [λληνικά](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gr-GR) -* [ગુજરાતી](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gu-IND) -* [Italiano](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/it-IT) -* [日本語](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ja-JP) -* [한국어](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ko-KR) -* [Polskie](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pl-PL) -* [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR) -* [Português do Europe](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-PT) -* [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU) -* [Tiếng Việt](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/vn-VN) +- [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN) +- [正體中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW) +- [Deutsch](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/de-DE) +- [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES) +- [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR) +- [λληνικά](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gr-GR) +- [ગુજરાતી](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gu-IND) +- [Italiano](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/it-IT) +- [日本語](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ja-JP) +- [한국어](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ko-KR) +- [Polskie](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pl-PL) +- [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR) +- [Português do Europe](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-PT) +- [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU) +- [Tiếng Việt](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/vn-VN) [back to table of contents](#table-of-contents)