tl;dr: You can stop worrying and URL-encode only the # character. What? So you want to have an SVG image in a CSS stylesheet. Yup, using data URIs (hey lookie, a 2009 post). There are a number of reasons not to embed images in CSS to begin with (caching, reuse), but hey, sometimes you’re not […]
Archive for the 'CSS' Category
Exploring prefers-reduced-motion
Aug 13th, 2019Animations and transitions on the web are cool and all, they can make the UI feel snappier and responsive (if used judiciously). However there are problems with motion like this. A whole lot of people are sensitive to motion and you don’t want your site to cause motion sickness and dizziness, right? Luckily, most modern […]
Asynchronous inline scripts via data: URIs
Feb 9th, 2019Inline scripts are synchronous. “Well, duh!” you may say. That’s a feature, not a bug. Because accessing a variable after an inline script should succeed. And that’s fine. But not great. When is this bad? Well, inline scripts cause stylesheets to be blocking. Wait, what? Steve explained it 10 years ago, and it’s still relevant […]
Defining user styles
Feb 5th, 2019User styles have been around since the early days of the web. They are a way for users to specify their browsing preferences using CSS cascade. I remember way back when this option was fairly prominent in Internet Explorer settings. Now, I don’t even know how to find it in most browsers. But I did […]
Stylelint + TextMate integration
Oct 1st, 2017Naturally, you want your lint tools integrated with your text editor. Here’s what I did to integrate Stylelint (hello!) with TextMate. New Bundle In TextMate… menu Bundles / Edit Bundles…. I didn’t see a way to add a new Command, so I right-clicked an existing one (one with a C icon for Command), selected Find […]
Hello Stylelint
Oct 1st, 2017Stylelint is a great new modern unopinionated CSS linter. It’s a must for any project beyond test.html. After my last post about always adding generic font families I thought it should be a lint-able thing. So I looked into extending Stylelint. You can write new lint rules and tell Stylelint to use them. In my […]
The last line-height you’ll ever need
Jan 8th, 2017One of the trouble areas with CSS (other than it’s too hard to master) is that it’s too easy to write a lot of it. (I’ll just leave it here. Lately we’ve seen far too much anti-CSS talk, I’m sure most of it is not wrong, but maybe not too productive either.) Therefore anything you […]
Downloading top X sites’ data with ZombieJS
Jun 6th, 2014Update: Easier way to get top X URLs: http://httparchive.org/urls.php, thanks @souders Update: found and commented an offensive try{}catch(e){throw e;} in zombie.js (q.js, line 126), now the script doesn’t fatal that often Say you want to experiment or do some research with what’s out there on the web. You need data, real data from the web’s […]
CSS diffs #2
May 9th, 2014Continuing from last night… First, two twitter responses pointed to even more readily-available options for comparing screenshots. One is Wraith from BBC engineers which supports Firefox/Gecko (via SlimerJS) in addition to PhantomJS. The other is the almost-ready siteeffect.io which is based on http://dalekjs.com/ which seems to support all the browsers! Anyway, I thought I should […]
css diff
May 9th, 2014CSS is the worst because it blocks page rendering. The bigger it grows, the more it blocks. And bigger is what CSS becomes if left unattended, as anyone who has worked on any project for more than a few days or with more than a few people can confirm. So occasionally one must step back […]
Hello subpixel world
Feb 6th, 2014Since IE9 and Firefox(v.?) we now have subpixel rendering of fonts. This is cool and all but imagine this: you have some text you want to measure the width of the text and size another element to the same dimensions Simple. But if you use offsetWidth/offsetHeight to measure, you get a rounded integer and not […]
Borrowing typography tricks from the masters
Sep 16th, 2013Inspect the styles in Mobile Safari’s Reader feature to learn typography
CSS animations off the UI thread
Mar 12th, 2013This excellent Google I/O talk mentions that Chrome for Android moves the CSS animations off of the UI thread, which is, of course, a great idea. Playing around with it, here’s what I found: Browser support: Desktop Safari, iOS Safari, Android Chrome. You need to use CSS transforms. Animating regular properties doesn’t work. Update: (see […]
webkit css-on-demand issues
Feb 11th, 2013This post brought to you via Facebook engineers Jeff Morrison and Andrey Sukhachev, who discovered and helped isolate the issue. Use case Think a “single page app” use case. You click a button. Content comes via XHR. But content is complex (and app is as lazy-loading as possible) and content requires extra CSS. In an […]
<style> tag to inline style=”” attrrib
Jun 21st, 2012As you may have noticed, I claim that CSS is bad for performance because: Most browsers block the very first paint until all screen CSS arrives Additionally many browsers block rendering until all non-screen (e.g.print) CSS arrives Sometimes CSS blocks downloads See “The evil that CSS do” in CSS and the critical path for details. […]
CSS variables
Jun 14th, 2012Weeee, CSS variables just landed in WebKit, this is pretty exciting! Unfortunately I couldn’t see them in action in WebKit nightly (must be something I’m missing), but they’re here and here to stay. I know there are “purists” that say that stuff like variables has no place in the language and we don’t really understand […]
CSS and the critical path
Jun 5th, 2012Back when I was still actively into speaking at public events (way, way back, something like year and a half ago (which strangely roughly coincides with the time I joined Facebook, hmmm (hmm? (huh? what’s with the parentheses? sure all of them are closed at this point?)))) I remember showing this slide: The reason I’m […]
5 years later: print CSS still sucks
Apr 25th, 2012This tweet had me revise a 5 year old experiment on how print CSS affects page loading, especially in the light of mobile browsers. So I tweaked the test ever so slightly to print out timing info in the document.title and after the page is done. The test is essentially how does a slow print […]
A rounded corner
Apr 13th, 2011Warning: not practical blog post, don’t read, move on. So this is a post about a thought I had – creating rounded corners in IE678 by using roundness that they already have built-in, meaning the character O. But first: My opinion is that browsers that don’t support border-radius should never ever get rounded corners. Let […]
When is a stylesheet really loaded?
Mar 17th, 2011Often we want to load a CSS file on-demand by inserting a link node. And we want to know when the file finished loading in order to call a callback function for example. Long story short: turns out this is harder than it should be and really unnecessary hard in Firefox. I hereby beg on […]
Command-line CSS spriting
Feb 19th, 2011(In Russian) OK, CSS sprite tools exist. I’m pretty confident I actually made the very first one 🙂 But they break from time to time (like mine currently). And then the command line is cool (as opposed to scary) and oh-so-quick. And imagemagick is cool and oh-so-powerful. So let’s see how we can create CSS […]
CSS railroad diagrams
Nov 28th, 2010So next step after the sexy CSS lexer is parsing. But first – railroad diagrams to help visualize how/when the tokens make sense forming valid CSS code. Below is what I have so far. It includes pretty much everything except selectors. Selectors are getting increasingly complex, come to think of it. There are probably mistakes […]
CSS Lexer
Nov 27th, 2010I have so much stuff to do and I’ve been feeling a little overwhelmed lately. Not depressed, because it’s next to impossible to be depressed at a climate including 320 sunny days a year and a beach. So I thought why not drop everything and relax. I’m currently staying at home, enjoying my unused vacation […]
CSS minifiers comparison
Oct 30th, 2010Last year I compared some CSS minifiers, namely YUICompressor, CSSTidy (with “small” vs. “safe” settings), PHP PEAR’s CSS lib and Minify (detailed results). Now that I’ve done some work on the YUICompressor and since there’s a new kid on the block from Microsoft I thought I should give it another go. I only compared CSSTidy […]
cssmin.js in windows shell
Oct 29th, 2010JavaScript can run virtually anywhere, including as a windows exe and the windows command line. Say you have a JavaScript function foo() function foo(input) { var output = input; // .. unicorns return output; } In order to make this a windows shell script you add at the and a way to read standard input […]