Today I Learned

3 posts about #html-css

Use the browser to validate email fields

You are using HTML5 typed text input fields, aren't you?

If you make an input element with type="email" and you make it required, then the browser will take care of making sure that the email is valid on form submit. Automatically.

Doesn't eliminate the need for validation on the server side, or does it?

Clearfixing is much easier these days

Hadn't needed to do a clearfix in awhile and thought I would have to do something like this:

.container::after {
    content:"";
    display:block;
    clear:both;
}

Or even worse...

.container::before, .container::after {
    content:"";
    display:table;
}
.container::after {
    clear:both;
}
.container {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

Then I was pleasantly surprised to learn that on modern browsers you just have to set the overflow property to auto on the containing element and you should be good to go.

.container {
  overflow: auto;
}

The most useful CSS printing directive

@media print {
    div {page-break-inside: avoid;}
}

Should be self-explanatory. Note that you can't use this property on absolutely positioned elements, but other than that, it pretty much works perfectly for preserving logical chunks of content in printed output.