Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Blogs about css

Setting Up User Styles in Firefox


While reviewing talks for CascadiaFest, I wanted to find a way to hide comments from other reviewers until after I'd formed my opinion of the talk. I figured this would be pretty easy to do with user styles - the browser's base set of CSS rules that are followed for every site. In Firefox, these styles are stored in userContent.css in your profile folder.

Doing so proved a little more complicated than I anticipated, because Google's search results seem to interpret "userContent.css" as "userChrome.css". As you can imagine, this made it a little difficult to find information on userContent.css. Here are the two references that I did manage to find:

Here is what went into my user styles:

@-moz-document domain( {
  ul.comment-list { opacity: 0 !important; }
  ul.comment-list:hover { opacity: 1 !important; }

The @-moz-document domain "selector" allows me to limit these styles to pages delivered from a certain subdomain. I then hid the elements using opacity, and showed them when they were hovered over. Opacity isn't always the best way to hide things with CSS; but in this case I did want the elements to take up space on the page, and for their children to also be invisible. And a user stylesheet is a fine place for !important; I always want that style to apply, even if a higher specificity selector would override it.

After editing userContent.css, you have to restart Firefox for the changes to take effect.

Seven Things You Should Know About Flexbox.


Flexbox is a great CSS module for making clean and flexible layouts. But flexbox is a bit odd, it can be tricky to get the results you're looking for when you're just getting started. Here are some things you should know about flexbox:

  1. display: flex; goes on a parent element. Then all children of that element become flex items and will accept other flex properties.
  2. Don't use float or box-sizing: border-box; with flex elements. It won't work they way that you'd expect from display or inline elements.
  3. flex-direction defaults to row to lay flex elements out horizontally. Sometimes, you want column to lay elements out vertically instead.
  4. margin-[side]: auto; makes the margin use up all the available space on that side. If multiple margins (in the same dimension) are auto, they each take an even share of the available space
  5. flex-grow: defaults to 0; where elements won't grow beyond the content's width. You probably want flex-grow: 1. Among other things, this handy for making all input elements stretch to use up the remaining space:
  6. flex-wrap: defaults to nowrap, where all elements will be stuffed on a single line (or a single column, for flex-direction: column;). Alternately, you may want flex-wrap: wrap; to allow the elements to flow to multiple rows.
  7. Flexbox is well-supported in all recent versions of Firefox, Chrome, Safari, Chrome, Edge, mobile browsers, and even passably-well supported in IE. See

For more about flexbox, see:

Breakpoint Backgrounds Bookmarklet.


When working with media queries, I find it useful to set a page's background color to something to indicate the breakpoint change. But it gets tedious to set it in the browser development tools over and over again, so I figured I'd just handle it with a bookmarklet - a block of JavaScript that you can execute by using a bookmark in your browser.

Since this is just a debugging tool on a local machine, even the simplest methods will get the job done. The most interesting thing is the enclosing javascript:(function(){ and })(); - just javascript protocol which tells the browser to execute it, and wee little anonymous function to hold everything together. Inside that, I create a style tag, and populate it with new media queries and declarations: set the background color to magenta for roughly mobile width browsers, teal for tablets, and orange for widescreen. (I couldn't think of an alliterative color for "w", since I usually wanted to overrule a white background.) All of the styles have a !important to avoid worrying about specificity. Here's the whole thing:

  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = "@media only screen and (max-width: 800px) { body { background-color: teal !important; } }" +
    "@media only screen and (max-width: 540px) { body { background-color: magenta !important; } } " +
    "@media screen and (min-width:1300px) { body { background-color: orange !important; } }";

Just load this up inside the location field for a new bookmark, and run it whenever you want to add the colors. Feel free to change the breakpoints to something for your site. It's just CSS on the inside, so you might have to reset a few more colors or adjust the selectors for your site.

For more on bookmarklets, see Bookmarklets FTW The Case by Lydia Katsamberis from Cascadia JS 2014.

Vertical Centering is Solved.


Every once in a while, I see a passing reference to how impossible it is to center something vertically using CSS. But vertical centering isn't difficult, not anymore. Here are some methods for vertical centering using only CSS (even on elements of unknown height) which are completely feasible for most sites.


Flexbox makes it dead simple to vertically center an element. Assuming you've got a height (even in % or rems), just throw display: flex; on the outer element, and margin: auto; on the inner element. This uses the flexbox mode, which is pretty well supported as of IE11, Firefox 33, Chrome 11, iOS Safari 7.1, and Android Browser 4.4.


The 2D transforms offer wider browser support (adding IE9, IE10 and Android Browser 4.1+) and a slightly more complex implementation. Put any height and position: relative; on the outer element, and these specifications on the inner element. This still works when the inner element is using an unspecified (or auto) height. Example:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

In case you need even more options or details on these solutions, I've detailed more methods here on Codepen.

CSS Hacks.


In the past, I've used CSS hacks * and _ as a quick and dirty way to make a few CSS changes for IE6 and IE7 only , while preferring conditional comments for larger scale adjustments.

When IE8 came out, developers used another CSS hack (\9;) to target just IE8. But when IE9 came out, it also rendered \9; hacks, which made it the perfect example of an unsafe CSS hack.

Since then, things have only gotten messier for CSS hacks. There are tons of new browsers out there, and IE10 was the last IE to support conditional comments. While CSS selectors still remain fairly ugly, sometimes they're just the tool you need. Fortunately, Browserhacks has pulled all the hacks from all over the internet into one place. And it's on GitHub - so you can add to it.

More blogs about css: