Skip to content

Commit 43e82e5

Browse files
Added new tips/notes 😎
1 parent f3172e3 commit 43e82e5

File tree

1 file changed

+28
-4
lines changed

1 file changed

+28
-4
lines changed

‎README.md

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ A collection of tips to help take your CSS skills pro.
1313
1. [Inherit `box-sizing`](#inherit-box-sizing)
1414
1. [Equal Width Table Cells](#equal-width-table-cells)
1515
1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox)
16+
1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links)
1617

1718

1819
### Use `:not()` to Apply/Unapply Borders on Navigation
@@ -45,6 +46,14 @@ Instead of putting on the border...
4546

4647
It's clean, readable, and easy to understand without the need for hack-y code.
4748

49+
Or, alternatively, since your new elements might be siblings, use the general sibling selector (`~`) and turn the problem on its head:
50+
51+
```css
52+
.nav li:first-child ~ li {
53+
border-left: 1px solid #666;
54+
}
55+
```
56+
4857

4958
### Add Line-Height to `body`
5059

@@ -139,7 +148,7 @@ html {
139148
}
140149
```
141150

142-
**Note:** There is no `text-rendering` support for IE/Edge.
151+
**Note:** [Please play with `optimizeLegibility` responsibly](https://bocoup.com/weblog/text-rendering/). Also, there's no `text-rendering` support for IE/Edge.
143152

144153

145154
### Use `max-height` for Pure CSS Sliders
@@ -149,6 +158,7 @@ Implement CSS-only sliders using `max-height` with overflow hidden:
149158
```css
150159
.slider ul {
151160
max-height: 0;
161+
overlow: hidden;
152162
}
153163

154164
.slider:hover ul {
@@ -157,8 +167,6 @@ Implement CSS-only sliders using `max-height` with overflow hidden:
157167
}
158168
```
159169

160-
You can animate to "auto" height!
161-
162170

163171
### Inherit `box-sizing`
164172

@@ -193,6 +201,8 @@ Pain-free table layouts.
193201

194202
### Get Rid of Margin Hacks With Flexbox
195203

204+
When working with column gutters you can get rid of `nth-`, `first-`, and `last-child` hacks by using flexbox's `space-between` property:
205+
196206
```css
197207
.list {
198208
display: flex;
@@ -204,7 +214,21 @@ Pain-free table layouts.
204214
}
205215
```
206216

207-
When working with column gutters you can get rid of `nth-`, `first-`, and `last-child` hacks by using flexbox's `space-between` property.
217+
Now column gutters always appear evenly-spaced.
218+
219+
220+
### Use Attribute Selectors with Empty Links
221+
222+
Display links when the `<a>` element has no text value but the `href` attribute has a link:
223+
224+
```css
225+
a[href^="http"]:empty::before {
226+
content: attr(href);
227+
}
228+
229+
```
230+
231+
That's pretty convenient.
208232

209233

210234
### Support

0 commit comments

Comments
 (0)