W3C home > Mailing lists > Public > public-webplatform-bugs@w3.org > July to September 2012

Re: [Bug 19010] New: Flag styling does not degrade gracefully and is broken in FF

From: Chris Mills <cmills@opera.com>
Date: Wed, 26 Sep 2012 11:13:26 +0100
Message-Id: <72EF167A-0DC2-47E4-B4F3-87E273278E19@opera.com>
To: public-webplatform-bugs@w3.org
Lea wrote:

> The flags are rectangular in Firefox. Moreover, in browsers that donít support
> border-image, there is no fallback, resulting in white text over pink which is
> incredibly hard to read.

> I'd suggest we use a CSS gradient for them, which will degrade gracefully in
> older browsers. The browser support for CSS gradients is similar or better to
> that of border-image.

If you want the same effect as is already used, you could always just chop the left and right edges of the flags up into two separate images, and include those on the flags as multiple background images, one positioned left and one positioned right. Then you could include a solid background colour as a separate property, for older browsers to fallback to. 

Chris Mills
Open standards evangelist and dev.opera.com editor, Opera Software
Co-chair, web education community group, W3C
Author of "Practical CSS3: Develop and Design" (http://my.opera.com/chrismills/blog/2012/07/12/practical-css3-my-book-is-finally-published)

* Try Opera: http://www.opera.com
* Learn about the latest open standards technologies and techniques: http://dev.opera.com
* Contribute to web education: http://www.w3.org/community/webed/
Received on Wednesday, 26 September 2012 10:14:01 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 26 September 2012 10:14:01 GMT