In a lit­tle exper­i­ment I’m work­ing on I recent­ly found a bit of a show-stop­ping prob­lem. After an APB on Twit­ter I got a rapid reply which helped me solve it, but it seems that I may be the first per­son to encounter this error, there­fore it’s encum­bent on me to doc­u­ment it. So this is that.

Read the full article

For some time now, since Safari 6 and Chrome 18 were released, we’ve been able to use the -webkit-filter CSS prop­er­ty to apply graph­i­cal fil­ters to HTML con­tent. But it seems that many peo­ple aren’t aware that you can also do this in Fire­fox and — with­in a very lim­it­ed set of para­me­ters — IE9 and above.

The rea­son for this is that all of these browsers sup­port SVG fil­ter effects, and CSS fil­ter effects are basi­cal­ly short­hand func­tions that apply pre­de­fined con­fig­u­ra­tions of SVG filters.

Read the full article

As you prob­a­bly know, icon (or, sym­bol) fonts are a great way to imple­ment scal­able, styleable icons which work across pret­ty much every brows­er (every one that sup­ports web fonts, any­way). There are many top qual­i­ty icon fonts avail­able, such as Pic­tos and Font Awe­some, but some­times you’ll want to cre­ate your own bespoke icons. Github wrote detailed instruc­tions of how they made their icon set, Octi­cons, in their post The Mak­ing of Octi­cons, but that relies on using some pro­fes­sion­al tools. In this arti­cle I’m going to show sim­ple alter­na­tive method that uses the bril­liant free tool, Ico­Moon. Read the full article

Using SVG for scal­able icon sprites isn’t a new idea, but the tech­nique required to use them is (as with all CSS sprit­ing) a lit­tle ver­bose, need­ing mul­ti­ple instances of background-position. A fea­ture from SVG1.1, Frag­ment Iden­ti­fi­er Link­ing, makes it much eas­i­er, and will be avail­able in the forth­com­ing Fire­fox 15.

Read the full article

With the release of IE9 and Fire­fox 4 all major browsers are going to sup­port using SVG in the img ele­ment or as a CSS back­ground image, which is great news as SVG images are good for high def­i­n­i­tion, scal­able web­sites. I’ve writ­ten a cou­ple of posts recent­ly about using SVG with the background-image prop­er­ty, and how to cope with browsers that don’t sup­port it. The method I came up with works, but is far from ele­gant; for one thing, it does­n’t allow for transparency.

Anoth­er approach we can take to the prob­lem is to use JavaScript to detect SVG sup­port. Alex­is Dev­e­ria wrote a script which detects if your brows­er sup­ports SVG and, if not, replace the images with PNG. It’s a good script, but I won­dered if there was an alternative.

Read the full article

My last post was about using SVG val­ues for the background-image prop­er­ty, and I point­ed out one big prob­lem with the technique:

The draw­back of this is that it’s not ready for use just yet—browsers that don’t sup­port SVG in background-image will not pro­vide any fall­back, even if you sup­ply anoth­er background-image val­ue; so in non-sup­port­ing browsers, no image at all will be displayed. 

This was annoy­ing me a lit­tle, and I could­n’t find any workarounds that did­n’t use JavaScript. How­ev­er, after a bit of head-scratch­ing I’ve come up with a way to get around it.

Read the full article