[Pro] CSS3 Corners - what does 'Add IE Hack' mean?

Freeway
1

As per the title, I don’t know what the ‘Add IE Hack’ tickbox means in the CSS3 action?

Also, can anyone confirm the compatibility of the action with browsers please?

I’m deciding if I can get away with using this action on HTML items rather than adding an image background to obtain round corners.

Thanks loads as always.

Neil.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

This enables a “shim” for IE 8 and lower, which do not support rounding corners in the normal W3C manner. It only loads if the browser is IE 8 or lower, so it’s very low impact (except for some extra cruft code in your page head) for everyone else.

This is the preferred way to round corners these days, because it doesn’t introduce non-semantic markup to your page (elements that have no content value, and simply create a “look”).

Walter

On Jun 21, 2013, at 11:25 AM, Neil wrote:

As per the title, I don’t know what the ‘Add IE Hack’ tickbox means in the CSS3 action?

Also, can anyone confirm the compatibility of the action with browsers please?

I’m deciding if I can get away with using this action on HTML items rather than adding an image background to obtain round corners.

Thanks loads as always.

Neil.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Walt,

Sorry for the delay in replying, didn’t see your post. Many thanks for the explanation, greatly appreciated!

All the best.

Neil.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Does that mean we should not create round corners by Graphic > Shape > Corner in the inspector menu - and should only use the CSS action?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

I would recommend it. Here is an example of what you get with each approach:

<div id="foo" class="r_12">
	your content here
</div>

versus

<div id="bar"><div id="bar_tl"></div>
	<div id="bar_t"></div>
	<div id="bar_tr"></div>
	<div id="bar_l"></div>
	<div id="bar_r"></div>
	<div id="bar_bl"></div>
	<div id="bar_b"></div>
	<div id="bar_br"></div>
	<div id="bar_m">
		your content here
	</div>
</div>

That’s a lot of extra HTML (and CSS) to create the same visual effect. Freeway’s approach is very solid, and cross-browser without shims, but it lowers the common denominator to IE6, and makes browsers that could easily handle the border-radius: 12px attribute slog through a lot of non-semantic code just to present one layout that all browsers can manage.

There’s another aspect to this that I often bring up, and that is that the visual representation is not as important (in the long run) as the content of your page. If a visual design is not precisely the same in all browsers, that’s actually fine and within the realm of reasonable expectations on the Web. No two browsers ever render the same page of HTML/CSS exactly the same anyway. Whether the corners of a box are rounded or not is well down the list of things to worry about in my opinion. Better that you focus your efforts on things that really matter, like “Is my text readable to all visitors” and “will this display reasonably on an iPad or Android tablet” and “will Google love me more”.

Walter

On Jun 24, 2013, at 7:55 AM, Noel Sergeant wrote:

Does that mean we should not create round corners by Graphic > Shape > Corner in the inspector menu - and should only use the CSS action?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options