Pew Pew Laser Blog

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

Blogs about code

Seven Things You Should Know About Flexbox.

1.10.2016

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: http://codepen.io/matuzo/pen/eJYdWV?editors=110
  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 http://caniuse.com/#feat=flexbox.

For more about flexbox, see:

Breakpoint Backgrounds Bookmarklet.

7.29.2015

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:

javascript:(function(){
  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; } }";
  document.body.appendChild(css);
})();

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.

Colorblindness Simulation with JavaScript.

3.7.2015

Around 4% of humans have some form of colorblindness. Since that's a significant portion of your web site traffic, it's probably worth doing some testing for how your site would look to those users. One way is the simulate.js from http://mudcu.be/labs/. For each image in an array of images, this JavaScript adds a new canvas element with shifted colors. Below is an example usage for Deuteranope type vision. The script also includes functions for Protanope and Tritanope type vision.

var images = scope.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
  Color.Vision.Simulate(images[i], {
    type: "Deuteranope",
    callback: function(canvas) {
      document.getElementById("lid_623").appendChild(canvas);
    }
  });
}

Below is the script in action: the fruit bowl and rainbow images are shown normally, and below each is simulated with deuteranopia, protanopia finally tritanopia.

Alessi fruit bowl, filled by Dirk Ingo Franke / CC 1.0 Public Domain http://commons.wikimedia.org/wiki/File%3AFruit_basket_alessi.JPG Rainbow from Budapest by Takkk / CC 3.0 http://commons.wikimedia.org/wiki/File:Rainbow_in_Budapest.jpg

The canvas element seems a tad unreliable - refresh the page once or twice to get the new images to load. It also can't be added when Codepen.

Vertical Centering is Solved.

1.26.2015

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.

Flex

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.

Translate

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.

6.21.2014

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 code: