Skip to content

Commit 9544b8d

Browse files
Added @Heydon's "lobotomized owl" tip 🚀
1 parent 8ec8434 commit 9544b8d

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

README.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ A collection of tips to help take your CSS skills pro.
88
1. [Comma-Separated Lists](#comma-separated-lists)
99
1. [Select Items Using Negative `nth-child`](#select-items-using-negative-nth-child)
1010
1. [Use SVG for Icons](#use-svg-for-icons)
11-
1. [Text Display Optimization](#text-display-optimization)
11+
1. [Use the "Lobotomized Owl" Selector](#use-the-lobotomized-owl-selector)
1212
1. [Use `max-height` for Pure CSS Sliders](#use-max-height-for-pure-css-sliders)
1313
1. [Inherit `box-sizing`](#inherit-box-sizing)
1414
1. [Equal Width Table Cells](#equal-width-table-cells)
@@ -146,19 +146,19 @@ SVG scales well for all resolution types and is supported in all browsers back t
146146
```
147147

148148

149-
### Text Display Optimization
149+
### Use the "Lobotomized Owl" Selector
150150

151-
Sometimes fonts don't display optimally on all devices, so let the device browser help:
151+
It may have a strange name but using the universal selector (`*`) with the adjacent sibling selector (`+`) can provide a powerful CSS capability:
152152

153153
```css
154-
html {
155-
-moz-osx-font-smoothing: grayscale;
156-
-webkit-font-smoothing: antialiased;
157-
text-rendering: optimizeLegibility;
154+
* + * {
155+
margin-top: 1.5em;
158156
}
159157
```
160158

161-
**Note:** [Please play with `optimizeLegibility` responsibly](https://bocoup.com/weblog/text-rendering/). Also, there's no `text-rendering` support for IE/Edge.
159+
In this example, all elements in the flow of the document that proceed other elements will receive `margin-top: 1.5em`.
160+
161+
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*.
162162

163163

164164
### Use `max-height` for Pure CSS Sliders
@@ -180,7 +180,7 @@ Implement CSS-only sliders using `max-height` with overflow hidden:
180180

181181
### Inherit `box-sizing`
182182

183-
Let `box-sizing` be inheritted from `html`:
183+
Let `box-sizing` be inherited from `html`:
184184

185185
```css
186186
html {

0 commit comments

Comments
 (0)