What is Digg?67 Comments
- panique, on 10/12/2007, -1/+20Clean? It does not degrade gracefully in all situations. Try it with Safari to see what I mean.
- Bogtha, on 10/12/2007, -0/+16> This means approximately 85% of your visitors won't be able to use your page in a proper way...
Nonsense. Just because Internet Explorer can't have the fancy effects, it doesn't mean the page can't be used in the proper way, you just set it up so that Internet Explorer falls back to the standard form control widgets.
Not seeing all the fancy effects you would if you used another browser != broken. - Bogtha, on 10/12/2007, -1/+17In general, replacing standard form controls with emulations is a bad idea for usability and accessibility reasons. This is no exception.
For instance, try tabbing to the checkboxes and ticking one of them with your spacebar. It doesn't work.
When you replace standard form controls, they end up only partially functional. While the particular functions you leave out might not be of concern to you, they are a deal-breaker for some of your visitors.
Another example is the faux dropdowns Digg uses to report an article as lame. They don't work properly for anything other than the most basic interaction possible.
This is bad design. Good design is all about making function æsthetically pleasing and usable, it's not about sacrificing function for prettiness. - Bogtha, on 10/12/2007, -0/+10Internet Explorer and Firefox 1.5 include an "accessibility interface" to let you describe the role an element plays, but it's a JavaScript interface.
http://developer.mozilla.org/en/docs/Accessible_DHTML
There are a couple of threads on the css-discuss mailing list:
http://archivist.incutio.com/viewlist/css-discuss/33525
http://archivist.incutio.com/viewlist/css-discuss/26182 - nomad111, on 10/12/2007, -4/+14Yeah... Safari is a no go. So now it won't work with IE 85% of users and now safari... so we are at 85.856% of users can't use it. I will say its a good way of moving things forward though... have to start somewhere. Nice Job. Even though I can't see it on my Safari
- Munter, on 10/12/2007, -4/+12A nice clean way of pushing the limits of css yet another notch.
Now we just have to wait for browser vendors to catch up to the creativity of designers once again. - scarycomp, on 10/12/2007, -2/+7Possibly sometime before apes (or robots) overthrow humanity, all browsers will be fully standards compliant. Until then, it's reasonable to cater to the majority while keeping the lowest common denominator in mind.
- seanmc303, on 10/12/2007, -3/+7Cool CSS tricks like this would be great if they worked in the most popular browsers, but this one does not. If your trick is not cross-browser compatible with the major browsers, what is the point. It is neat in concept, but in practice it is worthless. Don't get me wrong. I detest IE, but get this little baby to work in IE and people could actually use this.
One CSS operator that the author is using that is not supported by IE is the ' +' operator.
If:
input[type="checkbox"] + label {}
is changed to:
input[type="checkbox"] {}
maybe it would work for IE ???
I tested this change of taking out the label from the css in Firefox, and it didn't change the way it worked for Firefox. I don't have time to test it for IE. Someone else? - NoMoreNicksLeft, on 10/12/2007, -0/+4XUL is a mozilla-only thing. I think it's neat to build applications in it, but not for webpages or even what I would call webapps.
Xforms is probably a better bet, but why use it to reinvent the wheel? We already have checkboxes. When all you're doing is changing the graphics so they look snazzier, that's presentation, not content. - Zipp425, on 10/12/2007, -0/+4"Curious about What PDatabase is?"
haha - NoMoreNicksLeft, on 10/12/2007, -0/+4Yes, the first valid criticism yet. My artworks sucks, but these do actually make the checkboxes darker when they have focus. And because of the way the CSS is working, I know that it's the checkbox itself that has focus, and not the label. When they have focus already, the spacebar can set/unset them. So...
That only means that tab won't tab through to them. Working on it. - jamesjyu, on 10/12/2007, -8/+11Doesn't work in Opera either...
- dbronaugh, on 10/12/2007, -1/+4Well, it depends on what your goal is. If your goal is to rip off the author's code and use it right away, no -- it isn't going to do what you want. But if your goal is to build on what's there and have something very usable and cleanly implemented, I think it's a good start.
The most important thing here is that this is in essence a technology demo, which happens to work only on Firefox and Opera because (as of right now) they have the best CSS support. A few years back, KHTML had better CSS support. Is there really anything wrong with designing a -technology demo- for the most standards compliant, feature laden browsers around? - Cl1mh4224rd, on 10/12/2007, -0/+3IE also does not support the attributes for selectors. It doesn't recognize this syntax:input[type="checkbox"] {}.
So, you'd have to specifically name each input like so: <input type="checkbox" name="checkbox" ... />
So that you can do: input.checkbox {}
It's truly pathetic, but that's IE for you... - nutcase, on 10/12/2007, -0/+3Obviously (as said above) it doesn't work in IE.
As an experiment it is cool. - 5blocksfree, on 10/12/2007, -1/+4I personally think that this itself is a hack. I'd argue that component/widget modeling is outside the scope CSS' intent. What the web needs now is a unified markup language that will facilitate rich interfaces. There's XUL, which is a good step, but it's specific to firefox. This in and of itself isn't a bad thing, since greater adoption of firefox will lead to fewer security vulnerabilities. Getting it to happen, however, is another matter entirely.
- cmw72, on 10/12/2007, -0/+3Yeah ... I was so curious I went up to the top level: http://pdatabase.dyndns.biz/
"Formerly known as the Revolutionary Porn Categorization Database!"
Then later on:
"So, if after reading all this, you'd like a free beta account (with the option to make it a permanent free account at a later date), just email me. And if you think this is cool, tell your friends! Hell, invite them if you have your own account!"
That's brilliant! Who would suspect somebody of "pushing the limits of CSS" in order to drive traffic to their pr0n database? - reviewer, on 10/12/2007, -9/+12
"it should work with them too. (Except IE, nothing ever works in IE)"
This means approximately 85% of your visitors won't be able to use your page in a proper way... Java script hacks may be lame, but if they work, why not use them? - pornel, on 10/12/2007, -1/+3It is accessible. I've checked in Opera 9 and I can select it with space - it's not JS solution, it's a trick with simple CSS and selectors - there's still proper form underneath. Very neat.
Too bad that IE is rubbish and won't support that, but this technique can derade gracefully. - fontvirus, on 04/22/2008, -0/+2the link is dead...
- pussyWagon, on 10/12/2007, -0/+2I think this is something designers or really anyone should stay away from. While form elements arent that attractive, if I had to figure out what a form looked like on every site, I woulod go bonkers.
Leave the UI features alone for consistency's sake. - inactive, on 10/12/2007, -0/+2They need to make the file input area stylable, instead of making it invisible with a fake box on top.
- NoMoreNicksLeft, on 10/12/2007, -0/+2And if you're even the least little bit CSS-literate (I don't claim more than this status myself), then the answer how to at least degrade gracefully in IE should be apparent. Isn't it? Do I have to repeat it again?
The reason I left the IE workarounds out of the tutorial is the same reason they leave profanity out of foreign language textbooks... because they're obscene.
If IE7 is hiding the checkboxes, well that's farther along than IE6 in wine manages. Without a :checked selector though, I don't know what can be done. I doubt that the attribute value selector could do the trick ala input[checked="checked"], but even if it could, if IE7 doesn't support the + adjacent sibling selector it's all for naught. I don't have IE7 available to test with, unless someone's figured out a way to get it working in wine. Anyone else want to take a crack at it? - NoMoreNicksLeft, on 10/12/2007, -1/+3@seanmc303
If you drop the adjacent sibling selector, the , then it applies to the checkbox itself, not the label. That whole sequence says "find all labels that have a checkbox above them". But even if you somehow got that to work, without the :checked selector, it all falls apart. Best that can be hoped for, is to use IE conditional comments to undo all the fanciness for those poor lost souls using IE. If they want to use ugly, they can have ugly. - lhenkel, on 10/12/2007, -0/+2I was more interested in the rest of his site:
http://pdatabase.dyndns.biz/ (possibly NSFW) - meggani, on 10/12/2007, -1/+3It apparently doesn't work in safari either.
- CubiX, on 10/12/2007, -0/+2This is so neet. Now we just have to pass a law that forbids the use of non standards compliant browsers. Or at least IE :)
- NoMoreNicksLeft, on 10/12/2007, -1/+3Spacebar works, tabbing for focus does not. I admit I didn't consider this.
As for the arguments against doing this... I don't dispute them. One should only do this after the most careful consideration. I just got tired of all the other methods to the same end. Javascript? I mean, damn.
I also do not like the digg dropdowns... but I've had less luck styling select and option elements.
As for "sacrificing function", well, I'll just have to figure out what the deal is with tabbing. Read the spec closely, see if this behavior is correct or not, and if it isn't file a bugzilla report. If it is correct, well, I'm already wondering what could be done to rectify that. - CaughtThinking, on 10/12/2007, -4/+6It's amazing people think this is worth digging. Imagine if you could only talk during 15% of the day, or only earned 15% of your paycheck.
Jesus, I'm not m$ fanboy, but I'm fricking practical. Learn to deal with IE. - quinnk, on 10/12/2007, -1/+2I might implement this if the code to gracefully degrade back to standard checkboxes and radio buttons in IE was available... anyone have the code to do this handy?
- KillerJ59J, on 10/12/2007, -2/+3FirefoxForFags, grow up. Your like a god damn fan boy. Firefox is just a browser like any other browser, just because you don't like it doesn't mean you should slag it like it was Windows or something. (Jk on that last part.) And a lot of things on the Firefox myth page are mythes themselves. It looks like the whole site was made by a Microsoft fanboy, anyway. Get over it, some prefer Firefox because of how customizable it is and the fact that it is open source, some prefer Opera because it is fast and good for out of box use, some like IE because.. well I'm not really sure why they would, but I guess since it does what they need and don't want to switch.
- dbronaugh, on 10/12/2007, -1/+2Unfortunately, no. Not in Konq either.
I'm tempted to take a crack at it later and see what I can do. - inactive, on 10/12/2007, -1/+2very clean! thanks for the arti
- BlueLaser, on 10/12/2007, -3/+4@reviewer: I'm not sure why you're getting buried here. You make a perfectly sane point. In "real world" applications it's not okay to just dismiss the -market leading- browser as collateral loss.
I use Firefox when I can (read: at home). At work, we don't have a choice and IE is the browser flavor (as it is for many Fortune 500 companies with 30,000+ employees browsing the web every day). We may all agree Firefox is a better browser, but IE still holds about 85% of the browser market. Design for it. - NoMoreNicksLeft, on 10/12/2007, -0/+1At a guess, since there's no javascript trickery, the IE conditional comments could be used to re-override the styles that the stylesheet gives the labels and the inputs.
- smartssa, on 10/12/2007, -1/+2It's neat, but It has a serious usability flaw... Tabbing doesn't appear to work, and if it does I can't tell where my tab focus is.
- rspeed, on 10/12/2007, -0/+1@NoMoreNicksLeft
This isn't a screwdriver that you only use 15% of the time, it's a screwdriver that only works with 15% of screws. This wouldn't be a problem if it degraded gracefully, but unfortunately that isn't the case. - NoMoreNicksLeft, on 10/12/2007, -0/+1Dropdown's are even harder. While much of them is stylable (borders, font, colors, etc), there are two glaring exceptions. You can't change the down arrow graphic on the right side, and you can't change the :hover color on the options.
In Firefox, it's agreed that you should be able to change the option:hover color... there's a bugzilla bug filed for it. Still doesn't work. Til it does, you're left with whatever the system default color is, on my machine it's this ugly navy blue. Opera, while allowing style for pretty much everything Firefox does on the select tag, is even worse. Qt wants to give it this piss yellow color. Ack.
I've found a Mozilla only hack (stylesheets, no js) that will allow you to change the option:hover color. But it doesn't work in two browsers (the minimum, as far as I'm concerned), and it's not practical. You have to specify some widths, and only in pixels. If you specify it in any other measure it won't work. If you have some long option item, and you only set it for 120px wide, then only part of the background changes.
As for styling the down arrow? No idea at all. I've been wanting to, to make it match all the buttons and so forth... but I've run out of clever ideas. - panic, on 10/12/2007, -0/+1Interesting, so animated graphics should work as well. This could make for some really slick forms. The only thing I don't like about his example is how he doesn't allow it to work at all in IE. I just tried it (in IE7 anyway) and there are NO checkboxes or radio buttons. You can hate IE all you want (hell, I know I do), but the simple fact is that still the majority of internet users are on IE. It's important that you cater to them.
- NoMoreNicksLeft, on 10/12/2007, -0/+1Opera's just fine in my book. Really, anything is. As a matter of fact, I discovered a bug in Firefox's SVG with my last tutorial. They all have problems.
As for my little firefox ad, go ahead and become irate if you want. Just trying to make a little cash. (Two digg effects is worth about $10, yay!) You may or may not have noticed, that only gets served to those with a useragent string of "msie". People using konqueror or safari or opera... I don't bug them. (Except you guys using opera's stealth mode... dammit, be proud of using a decent browser!)
"So much for standards-based. Even Firefox has customized style selectors... which most people knock IE for implementing."
When Microsoft sticks a -ie prefix in front of their custom style properties, I'll stop bitching. - NoMoreNicksLeft, on 10/12/2007, -0/+1@cmw72
Haha. I have a page where people can upload pictures. I even used something I read here on Digg... very ajaxish, as soon as you upload the picture, a thumbnail appears below, asking if you really want to upload it. In addition to that, it asks for some general information about the picture (so that people categorizing it can avoid those they'd rather not see... gay/whatever) in a bunch of checkboxes. Well, the thumbnail box was just a bit too small for them, so I used this technique to shave off the checkboxes... they don't appear to the left, but behind the label as a sort of toggle.
It was a neat trick, and I thought I'd share it. You don't even have to make them look like checkboxes anymore. Instead of using the background image, you could add or remove borders from the label, or even use the :after pseudo-selector thingy to add text to the label.
It's one of several things I've learned doing this, and not the last I think others might be able to use even on their much more family-friendly websites. - NoMoreNicksLeft, on 10/12/2007, -0/+1@rspeed
Yes, the screwdriver that only works with 15% of screws. That's called a Torx. They sell those, and people find great value in them.
Again. I'm not writing remedial-*****-CSS tutorials. If you can't figure out how to make it degrade gracefully, then you don't know CSS at all. Google "ie conditional comments css" for *****'s sake. Such fixes are trivial, and gives IE the ugly styling it deserves. - dbronaugh, on 10/12/2007, -0/+199% of the time I agree with you. But sometimes there's a time where you want to make things look very different, for instance to fit with the rest of some entirely-graphical web interface where the default Windows widgets are just plain ugly.
In this case, technology such as this can be a real boon.
Just because it's -normally- a bad idea, doesn't mean the feature shouldn't be available. - panic, on 10/12/2007, -0/+1I do agree, but if done properly this could be very slick. I've seen some great flash interfaces that have radio buttons and checkboxes, complete with animations. I've also seen my share of terrible ones, too. As long as this doesn't fall into the wrong hands...
- recover, on 10/12/2007, -1/+1Very clean and nice. Lots to get here.
- InsomniaSlim, on 10/12/2007, -0/+0I am really getting tired of people pushing the hype about Firefox vs. IE. There are many things Firefox doesn't even do right. As a matter of fact, from my development standpoint, Firefox is a bigger pain than IE.
Take the box model, for instance. Even though Firefox implements the "box model standard" better than IE, 1.) it still isn't totally to standard and 2.) it's buggy as hell. I'm sorry, but if I declare a box to be 100% wide, and add a 1px border, I don't want the box to cause a scroll bar b/c it's 100% 1px! I have to use -moz-box-sizing in order to conform to other browsers.
And Firefox doesn't support inline-block... which is in the standard. So much for standards-based. Even Firefox has customized style selectors... which most people knock IE for implementing. My company has logged 6 show-stopper CSS bugs against Firefox in the last year. To their credit, they were fixed quickly... which is more than I can say for Microsoft.
Look, I'm no IE fan, but let's stop with the "get a REAL browser... download Firefox!" nonsense, ok kids? The fact is that there are a lot of browsers out there... and not a single one of them implements a pure CSS / HTML standard as it is written. I don't hear any of you saying "get a real browser, like Opera, or Firefox, or etc."
Firefox got a lot of hype and allows you to add plugins (which I use regularly) but the fact of the matter is NO browser is going to own 100% of the market, so let's stop with the browser-snobbery. - IbnDigg, on 10/12/2007, -0/+0I hate IE more than most, but any design that does not consider for IE is total waste of time.
- drewkinney, on 10/12/2007, -1/+1He clearly states that it doesn't work in IE.
How can anyone call this technique "useless".
There two uses, Firefox and Opera. He clearly says,
"As other browsers catch up with CSS, it should work with them too. (Except IE, nothing ever works in IE)."
If you don't want to use it, thats cool. He is entitled to his opinion, and you yours. He provides a 'potentially' useful technique. Consider a business with an intranet that stops using IE. This technique could fit that taget audience.
But if your ego needs inflating by being the first person to be a nay sayer- I'm sick of your bitching. I'm sure others feel the same. What do you bring to the discussion, a thoughful discussion or a giant hammer?
Don't be so sensitve when an author uses their opinion to hurt your ego. Why not post a rebutal on your own site? - Llanowar, on 10/12/2007, -0/+0Though it's a neat trick, I still haven't figured out how to use it on drop down lists.
It does work on any other form tag.
So if anyone knows how to use it on a drop down list, please let me know. - Weasel22, on 10/12/2007, -4/+4@jamesjyu
They work in Opera 9 beta. -
Show 51 - 63 of 63 discussions
Check out the new & improved 
© Digg Inc. 2009
— Content created and posted by Digg users is