Logo

TODAY I LEARNED

4 posts about #html-css

:is() pseudo-class - CSS

When we apply the same style to multiple selectors on CSS we use to do something like this:

.section-header h1,
.section-header span,
.section-header .heading {
  line-height: 1.2;
}
.navigation li,
.navigation p {
  padding: 5px 10px;
}

With :is() we can write our CSS in a shorter way.

.section-header :is(h1, span, .heading) {
  line-height: 1.2;
}
.navigation :is(li, p) {
  padding: 5px 10px;
}

Learned by carlos-pineda on Apr 19, 2021

973983 adforcodereview v3 0211021 c02 021121

Change the starting point for your ordered lists.

Use the start attribute to change the starting point for your ordered lists.

<ol start="10">
  <li>Git</li>
  <li>Ruby</li>
  <li>JS</li>
  <li>PostgreSQL</li>
  <li>CSS</li>
  <li>HTML</li>
</ol>

Output:

10. Git
11. Ruby
12. JS
13. PostgreSQL
14. CSS
15. HTML

Learned by Victor Velazquez on Feb 28, 2021

973983 adforcodereview v3 0211021 c02 021121

Comma-Separated Lists

Separate list elements with commas but not the last one:

ul > li:not(:last-child)::after {
  content: ",";
}

Example

  • Hello,
  • There,
  • Comma

Source: AllThingsSmitty

Learned by Victor Velazquez on Feb 14, 2021

973983 adforcodereview v3 0211021 c02 021121

Styling broken links

<img src="http://bitsofco.de/broken.jpg" alt="Broken Image">
img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

See the Pen Styling Broken Images by Victor Velazquez (@vicmaster) on CodePen.

Original source: bitsofco.de

Learned by Victor Velazquez on Feb 13, 2021

973983 adforcodereview v3 0211021 c02 021121