Some small Css tips #003

To continue on my previous post here are some more tweets with little Css tips that might help you in your projects.

Attribute selections

Stephan Nijman

@vanaf1979

Small #css tip: Besides the usual id's and classes you can also select/target elements based on there html attributes using css attribute selectors!

10:24 AM - 24 Dec 2020

Check out the full documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

---

Missing attribute selection

Stephan Nijman

@vanaf1979

Small #css tip: You can combine css attribute selectors with the :not() selector to target all images that you forgot to add an alt tag to.

08:24 AM - 26 Dec 2020

Text version is here: https://gist.github.com/vanaf1979/743529e1910c7f39eada070a41eba40c

Css :not() documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

To check for more a11y issues i recommend you check out checka11y.css https://github.com/jackdomleo7/Ch

---

Left aligning your html lists

Stephan Nijman

@vanaf1979

Small #css tip: You can use padding in combination with list-style-position to left align your list items (ul/ol) with its surrounding text.

11:29 AM - 27 Dec 2020

Full text version is here: https://gist.github.com/vanaf1979/f1107b152e21560ac47a529ce733c808

---

Simple columns

Stephan Nijman

@vanaf1979

Small #css tip: You can use the css column-count and column-gap attributes to layout your text over an x amount of columns.

10:31 AM - 28 Dec 2020

Full text version is here: https://gist.github.com/vanaf1979/27ce8660def0de2c58a34c21e7ccf98c

---

Adding icons to your links

Stephan Nijman

@vanaf1979

Small #css tip: You can use css attribute selectors in combination with the before selector to add an icon to links directing to a certain file type.

12:00 PM - 29 Dec 2020

Full text version: https://gist.github.com/vanaf1979/1f73caabf97a70ee9629ef80052aa81b

Attribute selectors docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Font Awesome with pseudo-selectors docs: https://fontawesome.com/how-to-use/on-

---

Responsive headers with clamp

Stephan Nijman

@vanaf1979

Small #css tip: It will take some fiddling with values. but you can use the css clamp function to create some great looking responsive header text!

👇Live example in the Codepen below!

12:14 PM - 30 Dec 2020

Live example in CodePen > https://codepen.io/Since1979/pen/KKgQzKw?editors=1100

Css Clamp Docs > https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

Css Clamp browser support > https://caniuse.com/?search=Clamp

---

Want more of this?

If you would like to have these tips, and other stuff, in your twitter timeline come and follow me @Vanaf1979. If you just want the gist you can follow me here on dev.to @Vanaf1979 as well. Or you could check out my blog at Sinse1979.dev

Thanks for reading and stay safe.