Setting cookies via Javascript

js-cookie is a great little library for setting cookies client-side:

<script>
$(document).ready(function() {
  Cookies.set('foobar', 'quuz', {expires: 2});
});
</script>

A particular use-case is when you need to send cookies but a server’s infrastructure restricts the use of Set-Cookie HTTP headers.

CSS “all” property

The all CSS property can be used to reset all of an element’s properties. Useful when an element has a bunch of properties and you want a clean slate for whatever reason:

.desc {
  width: 85%;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  /* a dozen more properties */
}

.page-42 .desc {
  all: initial; /* "inherit" and "unset" also valid */
}

Biggest drawback to this technique is the total absence of Safari/iOS support.

CSS :not() with attributes

If you want a CSS selector that applies to everything except certain attribute names and/or attribute values, use the :not() selector:

input:not([type=checkbox]) {
  /* apply to all inputs except those with a type of "checkbox" */
}

Chrome CSS inspector tracks changes

When tweaking CSS via the Chrome inspector, it keeps a running log of every change you make.

Press ESC to open up the console window. Next to the “Console” tab there should be a “History” tab. As you make changes to CSS (either via the Elements or Sources main tabs), they’re reflected here.