Syntax edit

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.
 
 <sup>[back to table of contents](#table-of-contents)</sup>
@@ -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/).
 
 <sup>[back to table of contents](#table-of-contents)</sup>
 
@@ -631,21 +634,19 @@ body {
 <sup>[back to table of contents](#table-of-contents)</sup>
 
 
-### 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 `<select>` drop-down is tapped, and to mitigate styling inconsistencies across browsers, set the `font` rule to `inherit`:
+To avoid mobile browsers (iOS Safari, _et al_.) from zooming in on HTML form elements when a `<select>` 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).
-
 <sup>[back to table of contents](#table-of-contents)</sup>