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