- Feature Articles
- CodeSOD
- Error'd
-
Forums
-
Other Articles
- Random Article
- Alex's Soapbox
- Announcements
- Best of…
- Best of Email
- Best of the Sidebar
- Bring Your Own Code
- Coded Smorgasbord
- Mandatory Fun Day
- Off Topic
- Representative Line
- News Roundup
- Editor's Soapbox
- Software on the Rocks
- Souvenir Potpourri
- Sponsor Post
- Tales from the Interview
- The Daily WTF: Live
- Virtudyne
Admin
That's awesome. The developer probably had a spec that told them they had to use style sheets, but they couldn't be bothered with such a restrictive format.
Admin
Ok, so it renders one of the best parts of CSS useless, unless tomorrow blue will be yellow, but it does let you write a lot more compact html, so it's got some use and even benefits.
Admin
I hated the new tv.com layout anyway, but now... Do they really get payed for this!?
Admin
simply amazing.
Admin
That one from the source is really nice too:
Admin
this is just like the old "MY_ZERO_CONSTANT=0"... just in case you ever want to redefine the value of 0, you will have a rubust enough system to do it in.
Admin
I can see a use for fashion websites. Updating the pages with the 'new black' only takes one change.
Admin
Whaddaya mean, HTML is not real programming? Of course it is. I've seen the term (X)HTML-programming" on sooo many CV:s.
As for today's post, this kind of work can only come from hands of someone, who titles himself "a HTML-programmer"
Admin
aw, you guys just dont understand how awesome this is. You can get rid of all the very confusing code you see around like [font color="#F0C000" size="12"]! How the hell am I supposed to know what that does?
I think the stupidity and hilariosity of that code speaks for itself.
Admin
The color names are confusing, though! They really should preface them with a c- instead of f- so you're certain you're dealing with a color and not a font.
.c-green {color:#060;}.c-med-green {color:#3c0;}
Admin
That's assuming f- stands for "font" 0:-)
Admin
it is some kind of hungarian notation. the prefixed "f" means "font" (the color attribute applies principally to font).
but the guy who wrote this couldn't get away with a a coherent notation. he uses 2 different notations:
- prefixvalue as in ".fl {float:left;}" or ".mt-0 {margin-top:0px;}"
- prefix-value as in ".f-verdana {font-family:Verdana;}"
--
rien
Admin
huh, well... ".mt-0 {margin-top:0px;}" should really belong to the second category. did i told you this notation is not coherent ?
--
rien
Admin
Could the reason be speed? If every page points to the same CSS file, then using the shorthand classes means less bytes sent to the browser. .ml-30 is shorter than margin-left:30px;
Admin
I didn't like the site before and having a look at the source explains why.
The pages link to a single stylesheet at http://www.tv.com/style/1/css/stylesheet.css which contains:
Yes, I'm sure knowing the forums style on every page outside the forum is necessary.
Admin
Unless my hexadecimal skills are rusty, it seems that "light orange" is between "dark orange" and "orange". So I guess light is the new medium.
Admin
Our internal website was originally put together by someone who knew CSS existed but didn't fully comprehend the concept of selectors. As such, our pages were FILLED with stuff like this:
<tr>
<td class='TDFirstLineFirst'>First line, first column</td>
<td class='TDFirstLineNormal'>First line, other columns</td>
<td class='TDFirstLineNormal>First line other columns</td>
</tr>
<tr>
<td class='TDFirst'>Other lines, first column</td>
<td class='TDNormal'>Other lines, other columns</td>
<td class='TDNormal'>Other lines, other columns</td>
</tr>
Repeated over and over and over, for every cell in every table. And since our system is largely data-driven, it's a lot of tables. Most of the table stuff comes from the fact that the author(s) didn't know about 'border-collapse: collapse', so they used the previously mentioned system to only draw the bottom and right borders (|) on TDNormal, the left, bottom, and right borders (||) on TDFirst, the top, bottom, and right borders (]) on TDFirstLineNormal, and all four borders on TDFirstLineFirst.
Another WTF was that s (in case that doesn't work: &nbsp; -- god DAMN this forum software sucks) were injected all over the place because someone didn't know about the 'empty-cells: show', to cause cell borders to be drawn for empty cells -- without which, because of the certain-borders-are-provided-by-certain-cells system, caused empty cells to result in missing left/top borders on adjacent cells.
Some carefully calculated CSS/HTML changes -- putting a single class on the master TABLE tag, and using more sophisticated selectors like 'TABLE.foo td', allowed me to cut some of the pages to 1/3 of their previous sizes.
Admin
You are correct that it reduces bytes sent to the browser. However one of the major points of CSS is that rather than enumerating every value you want to be changed for each tag you can simply say class="menuItem" or class="tvTitle" or class="tableRow". You're can still save bytes, but you gain the huge benefits that if you aren't mucking up your html code with ugly and hard to read style markup AND if you want to change the style for the entire website you can just change the CSS file without having to go through every single instance of the tag you want to change and modify the parameters.
Admin
.mt-30 {margin-bottom:30px;}
Looks like margin-bottom is the new margin-top.
Admin
Perhaps they know about it, and realize this property has no effect in IE6. Designing for 10% of your potential user base is the biggest WTF of them all.
Admin
They are using the uncommon but completely legitimate 'next cell' notation. Kinda like inverting the y-axis on a flight sim.
Admin
c'mon, I am sure there have been way worsth submisions than this one
Admin
Well actually this isn't a WTF at all, I use to do this for a newspaper site I use to webdev. Wrapping <font> tags outside of your <span> tags allows you to still give formatting for ancient browsers.
While this is less important now than it was 3-5yrs ago, when I ran the newspaper site, I still had a surprising amount of legacy web browsers (Netscape 2 & 3, heck I even had an occasional Netscape 1 user).
In today's world it's not as important unless you are designing a site for the whole world (ex: Amazon) and I'd still use that method.
Admin
"you will have a rubust enough system to do it in."
Rubust? Is that a combination of 'robust' and 'rubbish'? I like it.
Admin
I work on projects that contain CSS like this on a daily basis, sometimes for major companies with high paid developers. The most annoying part is I see the code, but I'm paid to do back end work so I can't even fix it.
Admin
For the 0.001% of people still using Netscape 4? Why? It's not as if leaving it out would make the page unusable for them anyway - anyone still using an ancient browser is going to be used to the entire web being nearly unreadable, and not having the exact font or size you want isn't going to make it any worse.
</font>
Admin
Lies, using IE is the biggest WTF of them all.
Admin
By virtue of my authority as Internet Pope, I hereby excommunicate TV.com from the Web.
Admin
They had a requirement for "valid" CSS.
Admin
Admin
I find that adding a WMF graphic to your home page that installs firefox and sets it as the default browser tends to fix that problem.
Admin
Silence, you unfaithful! Burn shall you in flames of hell! C|al|s, L3v|tr4 and V|4gr4 shall you eat! The pop-ups shall you click!
By virtue of my authority as Internet VicePope, I hereby order you to obey or be damned to selling University Diplomas and Rolex Replicas for eternity!
Thou shall not discuss the Internet Pope's words but implement them as a simple sinner that you are.
Admin
If I wanted a broken browser and a horrible user experience I would go install firefox myself.
Admin
Admin
Well, when writing stylesheets, there is usually a conflict between flexibility and simplicity. After all, stylesheets are ideal for people who use a small number of style properties over and over and over. The less diverse the style properties, the more effective the stylesheets become.
It seems that for these people flexibility won out. >_<
What strikes me about this is the almost-but-not-quite-Hungarian notation, implying that whoever did this might have heard of programming conventions at some point. Scary.
Admin
but he IS using stylesheets.
this is hillarious. I might put this is an an easter egg to my own code!
Admin
Indeed for the stuff i'm working on, overhauling a massive system that uses "90s HTML", i have a little bit of this stuff because I have to make it look essentially the same as it is now, but I'm encountering so many special cases that constructing new classes would become insane. This is there this mixin-style CSS is handy. However, I agree, this is way overboard. He's using these mostly for shorthands for (the rather verbose) CSS style properties.
Admin
By virtue of the fact that eight hours have gone by, and there are less than 40 replies, I would speculate that:
1. Damn few people have a clue about the WTF of the WTF
2. Even fewer people have a concept of CSS's
3. Most people don't give a rat's ass.
CSS's (correct me if I'm wrong), are opportunities to remove a lot of repetitive keystrokes in getting something done.
Like a "BASIC" subroutine.
Like a "C" function.
Of course, in the modern, pointy, clicky world, you merely cutnpaste, . . .
hmmmm. . . with all that in-line cutnpaste code, we could do away with optimizing compilors.
. . . another seven hour climb to the top of the mountain . . .
Your assignment, Mr Phelps, is to write a typesetting program that operates in 16 Kilobytes of memory.
This tape will self destruct. . . . oops. . . . We havn't invented tape yet
Admin
The scary part is that I didn't even know you could have multiple class names in a class="" entry.
Oh, and the mt thing for margin bottom... mt could stand for margin table.
Admin
Admin
Several years ago, my co-workers and I were laughing at some of the CVs that had been received at our office for a highly skilled technical position. One of the CVs listed HTML as a programming language, so I made some merciless joke about "HTML programmers". This was when I had about 14 years of (non-professional) programming experience.
One of my co-workers pulled up my C.V. on the web, and pointed out that it contained something like this:
Yeah. We all had a good laugh at my expense.
What I think happened was that I was trying to come up with buzzwords for keyword-searching headhunters, and I somehow forgot that I had written "programming languages" instead of "computer languages".
I don't know why, but I never noticed it until it was pointed out to me.
Admin
Let me play the devil's advocate a bit.
If you care about graceful degradation, using CSS exclusively is a good option: an ancient browser will show plain HTML, which is at least readable, instead of keeping the wrong part of the formatting thus making a mess out of your page. OTOH, if you care more about formatting than about content, why not use tables and <font> tags exclusively? They're not going anywhere anytime soon...
Really, now, I think this is actually a Dreamweaver WTF. This so-called HTML editor is incapable of rendering CSS-based layout, so it uses tables extensively (read tables in tables in tables... ad nauseum). It also seems to have a very limited knowledge of CSS selectors, i.e. it only knows how to define classes. Even for that, one must instruct it on purpose, otherwise it will just stick <font> tags whenever one tries to highlight a few words. Or else <span style="...">, depending on a whim, apparently. Of course, absolute dimensions are the norm - just try to use View -> Text zoom on a Dreamweaver-generated "web page" and you can say good-bye to your carefully crafted layout. And this is the most popular site creation tool out there...
The world's a WTF, I tell you,
Felix
</font>
Admin
Actually Felix, that's not entirely true. DreamWeaver produces massive amounts of WTFs when used in wysiwyg mode - when used with the "homesite" dealie turned on, it's more like a glorified notepad with FTP/SCP uploads, highlighing and file browsing. Compared to most, it's even fairly intelligent with it's code writing - not that any designer worth his/her ilk would use that automated code writing because it is still crap, even in the newer versions where they've fixed a lot of this.
I'm biased, I spent way too long writing web-fu in vi.
I love seeing these sorts of WTFs. My speciality is inserting layout around non-design-code (php, python, etc) and see a lot of little stupid screwups. Makes my day.
Jeannette blankpixel.com Ahhteeest & Designer
Admin
Yea, you guys are right the biggest WTF of them all is that people actually think that Dreamweaver is a good html editor. To all those people, ha ha ha ha ha ha. Kewl, now that thats out the way, I've noticed a lot of people signing their posts. Is this because of that new law passed in the states? Could anyone shed some light on this for me?
</font></font>
Admin
It's tying them up, in a knot
After what they've done no wone will ever approach this stuff.
Admin
You are kidding, right?
If you're not, then take a look at how the classes are defined and applied. In line with the date, as class attributes of container tags, live actual definitions of size, weight, colour, margings, padding, and so forth. So they're shortened up a bit and expanded in the stylesheet, so what? The particulars of formatting are still inline with the data.
When HTML (or an XML dialect) and CSS are done correctly*, the markup should only relate to the data. That is, you can identify headings, paragraphs, lists, links, definitions, data tables, and so forth, group them together into logical divisions on the document, and use classes to identify particular subspecies of elements. But there should not be any indication in the markup of what things should look like -- no colour, size, weight, and so forth. That's what the stylesheet does. And changing the stylesheet can give a completely different look to the page without touching the markup.
"But changing the stylesheet will change this page too," I hear you protest. Sure, but who wants to be stuck maintaining anything where blue is defined as yellow, x-big is actually small, and bold and italic are reversed? Using meaning-related rather than style-related class names means never having to say you're sorry. Well, at least not until the semantics change.
*Admittedly, markup that is semantic only in nature is going to be a problem if you need to acheive a particular look and also need to support Gen 4 and earlier browsers.
Admin
Sorry, blasted forum software. I was replying to this:
_____________________
Admin
Um, "data". Sorry.
Admin
There was an entire book on SVG that essentially advocated this approach - http://www.samspublishing.com/bookstore/product.asp?isbn=0672322900&rl=1
I was never able to figure out exactly what the author was trying to impress, or if he just didn't 'get' CSS. SVG has drawing elements such as a <CIRCLE ...>. The book would have a <CIRCLE>as part of drawing to represent the sun, instead of doing <CIRCLE class=sun ...>and then defining circle.sun as yellow, or orange, or some mix, the book used <CIRCLE class=yellow ...> and defining CSS classes leading to the obvious cliche - orange (brown, red, etc.) is the new yellow.
Unless someone from Google comments that this is a valid way to achieve high performance, mixing style with layout like this is a WTF
Admin
I found this a little bit too obscure. If you write c-green, you can't know which shade of green you get. Wouldn't this approach be better:
.c-060 { color: #060; }.c-123 { color: #123; }
Now you know exactly what color you get!