diff --git a/README.md b/README.md index 53aba9d9..83161c10 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ A collection of tips to help take your CSS skills pro. 1. [Use `rem` for Global Sizing; Use `em` for Local Sizing](#use-rem-for-global-sizing-use-em-for-local-sizing) 1. [Hide Autoplay Videos That Aren't Muted](#hide-autoplay-videos-that-arent-muted) 1. [Use `:root` for Flexible Type](#use-root-for-flexible-type) -1. [Inherit `font` on Form Elements for a Better Mobile Experience](#inherit-font-on-form-elements-for-a-better-mobile-experience) +1. [Set `font-size` on Form Elements for a Better Mobile Experience](#set-font-size-on-form-elements-for-a-better-mobile-experience) 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) @@ -67,7 +67,7 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you #### [Demo](https://codepen.io/AllThingsSmitty/pen/kkrkLL) -> [!NOTE] +> [!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. [back to table of contents](#table-of-contents) @@ -171,7 +171,7 @@ You can check if a font is installed locally before fetching it remotely, which /* Full name */ local("Dank Mono"), /* Postscript name */ - local("Dank-Mono"), + local("Dank Mono"), /* Otherwise, download it! */ url("//...a.server/fonts/DankMono.woff"); } @@ -251,7 +251,8 @@ 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. +> [!TIP] +> 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. #### [Demo](https://codepen.io/AllThingsSmitty/pen/GqmGqZ) @@ -365,7 +366,8 @@ 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*. +> [!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*. #### [Demo](https://codepen.io/AllThingsSmitty/pen/grRvWq) @@ -441,7 +443,7 @@ a[href^="http"]:empty::before { } ``` -That's pretty convenient. +That's really convenient. #### [Demo](https://codepen.io/AllThingsSmitty/pen/zBzXRx) @@ -557,7 +559,8 @@ img::after { } ``` -Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/). +> [!TIP] +> Learn more about styling for this pattern in [Ire Aderinokun's post](http://bitsofco.de/styling-broken-images/). [back to table of contents](#table-of-contents) @@ -631,21 +634,19 @@ body { [back to table of contents](#table-of-contents) -### Inherit `font` on Form Elements for a Better Mobile Experience +### Set `font-size` 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 `` drop-down is tapped, add `font-size` to the selector rule: ```css -input, -button, +input[type="text"], +input[type="number"], select, textarea { - font: inherit; + font-size: 16px; } ``` -Learn more in [MDN's guide to styling web forms](https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms). - [back to table of contents](#table-of-contents)