Content tagged “CSS”

  1. Jen Simmons on CSS’ display property

    Collecting a few of Jen Simmons‘ tweets:

    Learned on today’s CSSWG call—I had a fundamentally out-of-date mental model of how the display property structures its values.

    It’s not display: <value>;. It’s display: <outer-value> <inner-value>;.

    This realization won’t change what I write in my code, but it does change how I think about what I’m writing.

    display: grid; = display: block grid;
    display: flex; = display: block flex;

    Also: display: inline grid;

    You can write display: inline-grid;, but that’s actually out of date. It makes more sense to write display: inline grid;

  2. How Changing WebFonts Made 10x Faster

    Nate Berkopec‘s article is chock full of useful information, but I was particularly taken by his framing of a developer’s job (emphasis his):

    As developers, our job isn’t to tell the designers “Hey, you’re dumb for including over 500KB of WebFonts in your design!”. That’s not their job. As performance-minded web developers, our job is to deliver the designer’s vision in the most performant way possible.

    Equally interesting, but more technically-focused, is the rundown of how Google Fonts takes advantage of the unicode-range property to deliver smaller fonts.

    The unicode-range property describes what characters the font supports. […] By telling the browser what characters the font supports, the browser can look at the page, note what characters the page uses, and then only download the fonts it needs to display the characters actually on the page.

    Brilliant. I switched to serving fonts from Google and trimmed 45–70 kilobytes from my homepage. Your mileage may vary, but… not bad.

  3. The future of loading CSS -

    Chrome’s about to change how it handles <link rel="stylesheet">. This is big news and Jake‘s got the rundown:

    The plan is for each <link rel="stylesheet"> to block rendering of subsequent content while the stylesheet loads, but allow the rendering of content before it. The stylesheets load in parallel, but they apply in series. This makes <link rel="stylesheet"> behave similar to <script src="…"></script>.

    It’ll take some getting used to sprinkling <link rel="stylesheet"> throughout a page’s <body>, but the performance benefits (coupled with HTTP/2) will be worth it.

  4. The makeup of the Open Web stack - destroy/dstorey

    The Open Web has never had as many capabilities as it has today. We’re seeing an explosion in new or updated specifications, and prototype and stable implementations to go with them. This blog post will look back as the platform we have had available (Called Open Web 0 here) and then looks forward at what we are beginning to get now and into the short and medium term future (which I’ve labelled Open Web 1).

  5. Better for Accessibility — Simply Accessible

    You may have heard that display:none is bad for accessibility and that you should use off-left positioning instead. It isn’t about using display: none; or off-left positioning. It isn’t just about screen reader users. It’s about making an interface work for everyone with efficient keyboard access for everyone that needs it—sighted or not.

  6. Fluid Grid System

    A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.

  7. Jammit: Industrial Strength Asset Packaging for Rails

    Jammit is an industrial strength asset packaging library for Rails, providing both the CSS and JavaScript concatenation and compression that you’d expect, as well as YUI Compressor and Closure Compiler compatibility, ahead-of-time gzipping, built-in JavaScript template support, and optional Data-URI / MHTML image embedding.

  8. CSS SuperScrub

    “This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.” I’m generally pretty wary of tools proclaiming this, but figured I’d save this one for later examination anyway.