"I think I'll use AJAX and PHP and generated images as a background to fake support for a CSS3 element"
-
This has to be the worst example of code and technology misuse I've ever seen, proudly displayed for your pleasure:
Rounded borders for IE, Konqueror and Firefox
In short: this is a method for applying rounded borders with one single line of CSS. No messy tables, no messy :before{content()} stuff – just plain old border-radius. I had an idea last week…
"if all existing browsers have trouble rendering rounded borders (yes, even firefox), then why not just remove them completely from the CSS and render them as a background image in PHP?"
Uhh....
"In other words, scan the CSS, grab any CSS relating to rounded borders, and render the borders as a background image."
Uhhhhhhhhhmmmmmmm........
"This thought was electric! Why hadn’t I thought of it before? Why hadn’t anyone else thought of it?"
runs screaming Because you're a moron and it's a horrible idea?!?
-
The borders aren't even smooth. They're very blocky and jagged. All that work and the end result is terrible.
-
I'd hate to be a maintainer of this code. 681 lines for something very simple like this.
-
Oh my god... Try to resize or scroll the page, FF 2.0 suddenly took 99 % of my CPU.
If I ever encounter a page using that code I will definitly .host block it, such a travesty should not be allowed to exist.
-
well, I can't say I wasn't warned!
to be fair, I wrote the thing just to see if I could. I don't think it has ever actually been used as anything other than a demo.
For an example of fake borders /without/ PHP, try this misuse of JavaScript (anoher of mine :-) )
-
This method is vastly better/easier: http://www.webreference.com/programming/css_borders/index.html
Just use some <b> tags and leave it at that.
-
To be even more fair... I have immense respect for someone who not only admits writing a WTF, but also happily admits that it's a WTF *and* directs us to more code he's written.
You'll probably go far in this industry. Arguably, the most important part of being a successful developer is being unafraid of mistakes. :)
-
To be honest, I don't really think it's a real WTF - I wouldn't use the code in production work (which most WTFs seem to...), and it is actually solving a problem which has not been solved elsewhere (most WTFs appear to be grossly over-coded attempts to solve problems which have already been solved).
The code in question here actually provides a border-radius according to the W3C specs. This is something which no browser does on its own.
HitScan's example of an existing solution to the perceived problem actually doesn't solve the problem. That example merely provides curved corners. What if the CSS specifically specifies corners which are 37px radius in Y and 54px radius in X ? The given example will not provide that, but my "WTF" will.
Anyhow... call it what you will, I had fun writing it, and that's all that matters ;-)
