Comments for Paul Irish

Comment on Bulletproof @font-face syntax by Behind the Geek Out Scenes: Fancy Fonts and Jaunty Input Fields

Behind the Geek Out Scenes: Fancy Fonts and Jaunty Input Fields — Fri, 10 Sep 2010 03:58:22 +0000

[...] by using an EOT and a TTF. The easiest way to cater to all your users is to use Paul Irish's Bulletproof @font-face syntax. It relies on your including the differing file formats in a specific order, so that all the [...]

Comment on Introducing… CSS3Please.com by Clemens

Clemens — Thu, 09 Sep 2010 10:57:43 +0000

Hey,
very nice site :)

btw, Chrome 6 supports box-shadow without the vendor prefix. Should be added to the comments in the box-shadow section, as it's one step out of the vendor prefix mess ;-)

Comment on Conditional stylesheets vs CSS hacks? Answer: Neither! by scott lepich

scott lepich — Wed, 08 Sep 2010 22:06:48 +0000

@fearphage

This is a really good point.

It may not affect performance for most sites, but it's worth noting that browsers generally read selectors right to left. Using a body or html class would force standards browsers to read selectors designed for IE up to the ie-specific class before discarding them, rather than having to do no work at all in the case of a conditional comment wrapping an external stylesheet. WIth an external sheet, only the browser that requires the help is subjected to the additional stylesheet downloading and parsing.

It might not be a huge deal for the handful of selectors generally needed to bring IE6 into line, but it's something to think about when designing larger solutions.

Comment on Browser CSS hacks by Paul Irish

Paul Irish — Wed, 08 Sep 2010 09:19:57 +0000

@Lindsey Simon
That does sound bad… :(

Comment on @font-face gotchas by Martijn

Martijn — Tue, 07 Sep 2010 08:59:53 +0000

@Marijn
Thanks for the tip. I'll try it out!

Comment on Avoiding the FOUC v3.0 by Alhadis

Alhadis — Tue, 07 Sep 2010 06:15:11 +0000

Interesting technique, Paul. =) My prior solution to that stupid FOUCing issue was to hide the worst-affected elements in the core CSS, using a style like ".nofouc" to negatively offset the items a few thousand pixels off the edge of the monitor. Once the DOM had loaded, jQuery would run through and strip the class name from said elements, suddenly snapping them into view.

Of course, this would mean JS-disabled browsers would be left staring at an empty screen - so my approach was to stick an old-school tag into the head:

And the noscript.css contained rules for negating the anti-FOUC styles included in earlier stylesheets. Not the prettiest or the most elegant solution (not to mention it doesn't validate against XHTML Strict), but it works like an absolute charm.

The technique is valid HTML5 though, so… one more reason to look forward to the future. ;)

Comment on Conditional stylesheets vs CSS hacks? Answer: Neither! by Paul Irish

Paul Irish — Mon, 06 Sep 2010 20:22:35 +0000

@quiaro
No good reason except dreamweaver apparently barfs all over the first one.
Feel free to use your shorter version.

Comment on Bulletproof @font-face syntax by Paul Irish

Paul Irish — Mon, 06 Sep 2010 19:53:07 +0000

@Marijn

Well firstly I have never heard of people saving in ANSI instead of Unicode for performance reasons… I'd love to see more details to verify it is legit..

But you can do a ANSI question mark and the smiley has the same effect, basically. Not a huge deal.

Comment on 10 Things I Learned from the jQuery Source by Superficial

Superficial — Mon, 06 Sep 2010 18:24:19 +0000

Great watch!
Very funny to see you make more sense drunk than me when i'm sober! ;)

Comment on High-res browser logos by Richard Fink

Richard Fink — Mon, 06 Sep 2010 14:54:43 +0000

Alphabetical, yeah, sure.
I'm using these icons in a PPT presentation in Dublin, Ireland. Fitting, eh, Mr. Irish? Hah!
Thanks to you I'll have the best looking browser icons in town.
Much merriment and icon envy, I'm sure. I owe you a pint.
Thanks!

Comment on My harmonious background canvas by Kai

Kai — Mon, 06 Sep 2010 09:49:09 +0000

Thank you!
Thats what i was looking for!!!!!!!
Kai
@Paul Irish

Comment on Introducing… CSS3Please.com by David Hucklesby

David Hucklesby — Mon, 06 Sep 2010 00:05:33 +0000

One caveat about using the IE gradient filter for rgba background color: the filter fails in IE7 when any degree of page zoom is applied (other than 100%). :(

The .box_rotate calculations alone will save me lots of work. Thank you, thank you.

Comment on Bulletproof @font-face syntax by Marijn

Marijn — Sun, 05 Sep 2010 21:07:24 +0000

@Paul Irish
I'm always very keen on following these kind of clever advises, as I am not really an expert in CSS matters. But I did notice this: after cutting/pasting the smiley into my stylesheet, I had to save it in Unicode instead of ANSI, and it now takes twice as much space on the server - and therefore I assume twice the time loading? So for performance maybe it is better to have the question mark in ANSI, instead of the smiley? Or is this a really stupid and unnessacery remark?

Comment on @font-face gotchas by Marijn

Marijn — Sun, 05 Sep 2010 20:39:47 +0000

@Martijn
I have experienced the same on one of my sites. Ended up using the META tag for IE8 to render in IE7 mode - which I already dislike very much - and then a conditional line of CSS for IE7 (below the link to the general stylesheet), in which I once again defined the font-family. Somehow IE needed this bit of encouragement… Still looking for a cleaner solution, though.

Comment on Conditional stylesheets vs CSS hacks? Answer: Neither! by Jacob Baker

Jacob Baker — Sun, 05 Sep 2010 20:20:32 +0000

I see problems using the FOUC v3.0 technique in combination as Javascript has to be put directly under the "body" tag. What happened to js being put in the "head" tags or in the footer?

Instead of using the "body" tag for "jsOn" or the "jsEnabled" why not use the "html" tag. This then frees up the "body" tag for the ie6-ie7-ie8 conditional commenting by which time the CSS file will already be loaded up