What is Digg?77 Comments
- hooksie, on 10/12/2007, -1/+23"IE users don't get to have any of the fun yet."
Do they ever? - Unr3a1, on 10/12/2007, -2/+19Border image: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/border-image.html
Rounded borders: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/rounded-border.html
Opacity: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/opacity.html
Border-color: Border image: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/border-image.html
Rounded borders: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/rounded-border.html
Opacity: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/opacity.html
Border-color:
http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/colored-border.html
RGBA colors: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/rgba.html
Background-size: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/background-size.html
Multiple backgrounds: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/multiple-backgrounds/
Media queries: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/media-queries.html
Text shadow: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/text-shadow.html
Box-sizing: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/box-sizing.html
Background-orgin: http://72.14.203.104/search?q=cache:http://www.joostdevalk.nl/code/css3-preview/background-origin-and-background-clip.html - Unr3a1, on 10/12/2007, -0/+15http://www.w3.org/TR/css3-roadmap/
This pretty much covers the rest. - richardiscool, on 10/12/2007, -4/+19Is that sarcasm? If if is, you obviously aren't a web developer...
- moges, on 10/12/2007, -2/+14Digg doesn't have signatures. For a reason
- konforce, on 10/12/2007, -0/+11Too bad it will be many years before IE ever supports any of these features, thus making it almost worthless for the average site to use them. Even if IE's usage somehow dropped to 50% world wide, it would still be too big of an audience to ignore. Yes, some of the features can be implemented as "bonus" for those using a good browser, but for the most part it's not practical to use it (except for custom inhouse apps).
- Alphabet, on 10/12/2007, -5/+16IE users can't even get css2 to work.
I made a site, and it took me several days trying to get everything to be IE compliant. I finally gave up and posted a message saying "This site will look ugly in IE because IE doesn't support anything." - RyeBrye, on 10/12/2007, -1/+10Anyone wondering how WebKit renders pages without access to Safari can use the Safari test page:
http://www.snugtech.com/safaritest/
(it will render a page with WebKit and give you a PNG of the page as it would appear in Safari) - inkswamp, on 10/12/2007, -0/+7> IE users can't even get css2 to work.
No kidding! I do web development on Safari and Firefox (in general, better feedback and troubleshooting tools) and for the most part, the two display things almost identically. (That's what adhering to standards gets, I guess.) Then, inevitably I have to backtrack and see what needs to be "fixed" for IE. There rarely is any CSS that doesn't need some crutch to function correctly in IE. What a predicament. The biggest browser is the worst. - dvdgee, on 10/12/2007, -1/+7w00t. css3. fancy tricks, still no way to code real-world layouts without resorting to ridiculous, convoluted hacks (see any article on alistapart ). equal height columns? nope, still have to use unintuitive combinations of ridiculous padding combined with ridiculous negative margins. vertical centering of content within a block? nope, sorry... i mean, it's not like this has been a standard design technique for about as long as the concept of graphic design has existed, right? an easy way to combine percentage widths with fixed-pixel margins, padding or borders? umm, well, yeah... IE got that right. by misreading the standards, of course. the list goes on...
and yes, i know how to accomplish any of those techniques with CSS. the point is that the means to do so is completely ridiculous, and for absolutely no reason. a presentation language should make it straightforward to accomplish real-world design, not require a "holy grail".
edit: just noticed that box-sizing has evolved from a proprietary mozilla property to a full standard. so cross one off the list, even if an easier way to do this would be to use the form
selector {
width: 500px outside|inside|border;
height: 200px outside|inside|border;
}
which would allow independent box-sizing of width & height. at least they got one thing right, they used IE's method of independently controlling x& y axis overflow. mozilla's proprietary method (overflow: -moz-overflow-x|y ) would have been a major setback. - Bogtha, on 10/12/2007, -2/+7> IE users can't even get css2 to work.
Actually, Internet Explorer still doesn't support some parts of CSS 1.
> IE7 cometh to kicketh some asseth or at least to catch upeth with today's official standards.
Nope. According to the Internet Explorer developers, it still won't support massive chunks of the CSS 2 specification, published in 1998. And they aren't even attempting to support XHTML or the DOM event model.
Internet Explorer 7.0 is catching up to where other browsers were years ago. Internet Explorer 8.0 will probably catch up to where other browsers are today. - d1mm3r, on 10/12/2007, -3/+8IE users don't deserve to have any fun.
- MikeCampo, on 10/12/2007, -4/+8If only the site wasn't dead...
- sandrat44, on 10/12/2007, -0/+4Nice stuff! Now how do we get all browsers to support it consistently? I'd really love to see this work on all browsers, it'd cut down on a lot of development time, and provide a consistent look to all users of all browsers. Can't we form some type of designers group and send in a letter to browser makers (especially MS)?
Also, I wish he'd posted more screen shots as some of the effects were not visible in the latest version of FF.
go ahead... digg me down :) - PSyMastR, on 10/12/2007, -2/+6I think its the Digg Effect. I'm not sure. I read that somewhere on a blog. Its pretty sad how these servers cant hold up the bandwidth for massive amounts of traffic, but my little homemade server can... Hmm...
- rastan, on 10/12/2007, -0/+4Yes, see the border-radius option. This is actually already impelented in firefox as moz-border-radius. You can see an example of it here:
http://wiki.novell.com/index.php/OES_as_PDC
Everything is done in CSS (inline due to wiki restrictions, but still), there aren't any images there for formatting purposes. Fee free to "view source" to see how some of the items were done.
FULL DISCLOSURE: I wrote this article. - zweben, on 10/12/2007, -0/+3I wish that worked too. I tried to do it on my site and was pissed off when I had to add a ton of extra IDs to links instead.
- inkswamp, on 10/12/2007, -0/+3> IE7 cometh to kicketh some asseth or at least to catch upeth with
> today's official standards.
I really wish that were the case. I despise MS and IE, but I'd love for IE to be the superior browser as most people use it. But just as a tip-off, look at what we're talking about here. We're talking about future CSS implementations. Safari and Firefox and other browsers are already on it. IE, even if it catches up to "today's official standards" (as you say), will still be lagging behind. For IE to kick ass, it needs to get caught up and then some. Good enough just isn't good enough. - Bogtha, on 10/12/2007, -0/+3> You couldn't have proven my point more thoroughly if you were trying.
You said that CSS 3 was a bunch of fancy tricks unable to do things like equal height columns in a simple way. I pointed out that CSS 2 could already do those things. I hardly proved your point, I completely contradicted it.
> So, in the move away from table based design, in order to create a basic grid structure, we need to specify that it *is* a table in CSS? Yes, that's a really clear, succinct approach.
You are getting confused because they both use the word "table" to mean two different things.
HTML uses "table" in the sense of data related across multiple axes.
CSS uses "table" in the sense of a grid layout.
These are two very different concepts. One is about what the data means, and one is about how something might be presented visually. The only relation is that HTML tables are usually laid out in a grid manner. This does not mean that HTML tables are for grid layouts. Most of the time, what you lay out in a grid isn't a table in the sense of data related across multiple axes, so using HTML tables makes no sense. That's what CSS tables are for.
> This method is just as ugly a hack as...
The whole idea of using HTML elements to force a particular layout is a hack in itself. CSS separates the presentation so that HTML can be used properly. Using CSS properties as they were meant to be used isn't a hack. Abusing HTML element types to force a layout is a hack.
> Don't be a fanboy.
I'm not. Don't confuse being contrary with being smarter than the status quo. Just because CSS is trendy and table layouts aren't, it doesn't mean bucking the trend is a sensible thing to do. Sometimes something is trendy because it's simply the better approach. This is one of those cases.
> CSS is useful and a great idea, but has severe shortcomings when it comes to layout.
Yes it does. But not the shortcomings you claim. And table layouts have even worse shortcomings, they are broken by their fundamental nature, which isn't the case for CSS.
> The original vision of the web was that an average person, not a paid professional, would be able to mark up web documents.
Yes, and injecting stupid presentational hacks into the markup that anybody editing the actual content has to carefully preserve makes that goal much harder to accomplish. Have you ever worked with beginners who have to edit content that is mixed up with a complex table layout?
> table-based design may have been clunky, and arguably inaccessable, but it was linear in its rationale, and anybody with a piece of paper, a pencil, and a ruler, could figure out how to create most common real-world layouts.
Most common real-world layouts were created under the constraint that they work with table layouts. That's a tautology.
Table layouts aren't easy for newbies, they aren't as cross-browser compatible as some people claim, and you still can't trust browsers to render them without bugs. The fact is, newbies are going to have a difficult time with either layout method. Table layouts don't have an advantage here. - wusch, on 10/12/2007, -0/+2I'm really looking forward to using multiple backgrounds =D
- BugMeNot2, on 10/12/2007, -2/+4http://www.duggmirror.com/design/CSS3_Preview/
Only gives you the front page though; you can't get to any of the stuff that you actually want to see. - wtfdan, on 10/12/2007, -4/+6Dugg to death.
- ShadowPt2, on 10/12/2007, -6/+8Beautiful.. I wonder what else is new in the CSS3 specs?
- The_Decryptor, on 10/12/2007, -1/+3"IE7 cometh to kicketh some asseth"
IE7 finally, "fully" supports CSS1 (unlike 6 that supported CSS1 Reduced), it's still nowhere near Firefox, Opera, etc. - Eddible, on 10/12/2007, -0/+2The rounded corners are a bit of a god send. That will save so much time, no more having to mess around with images to achieve the effect. Saying that, you can just see IE will support all of them apart from that, just to annoy me.
- MrSunshine, on 10/12/2007, -0/+2adityavm, have you tested your own solution? It won't work.
- pornel, on 10/12/2007, -0/+2Yes. Anti-alias is in Firefox Cairo builds already.
- zootm, on 10/12/2007, -0/+2"Ok, I guess Safari is KHTML, not WebKit. Not sure where I saw that. But still... if anyone knows how to change the background size, i'd appreciate it :)"
WebKit is essentially an Apple-specific version of KHTML. It's based on KHTML and some patches work both ways, although it's not really as simple as it seems like it should be. It uses a lot of native OSX widgets and the like.
Judging by pornel's comment, this feature is currently only in pre-released versions of WebKit. - judgeFire, on 10/12/2007, -0/+2Mac users might want to use a Webkit nightly to see more features, as they appear:
http://nightly.webkit.org/
J - harmlessinc, on 10/12/2007, -0/+1@pcgeek101 -
Knock off the comment spamming. - Nanobe, on 10/12/2007, -0/+1http://www.webdevout.net/browser_support_css.php#css3standards
This is a resource I develop. The CSS 3 features that are listed are the ones that have made it to Candidate Recommendation at some point, meaning browsers were expected to begin implementing them. IE6, IE7, Firefox 1.5, and Opera 8.5 are covered. - konforce, on 10/12/2007, -0/+1"w00t. css3. fancy tricks, still no way to code real-world layouts without resorting to ridiculous, convoluted hacks (see any article on alistapart ). equal height columns? nope"
Yup. See: http://www.w3.org/TR/2005/WD-css3-layout-20051215/
A layout module. Does everything you say CSS3 doesn't do. - demon0, on 10/12/2007, -0/+1Border-radius and multiple backgrounds should prevent the need for almost all the CSS hacks I use on my site.
- firehydra2k, on 10/12/2007, -2/+3Is it just me or is it taking a long time to load...
Here's the google cache...
http://64.233.161.104/search?q=cache:cJLTnbzv2IMJ:www.joostdevalk.nl/code/css3-preview/ &hl=en&gl=us&ct=clnk&cd=1 - MrSunshine, on 10/12/2007, -1/+2Will it ever be possible to give a textlink a border, without affecting imagelinks and without having to declare an own class for the latter?
I wish I could just write:
a {border: 1px solid #000}
a img {border: none}
and
[a href="#"]textlink[/a]
[a href="#"][img src="blah.png" alt=""][/a]
But this doesn't work, as "a" is the parent element, the image is surrounded by a border too... I'd like to see the responsible people find a solution better than:
a {border: 1px solid #000}
.imagelink {border: none}
[a href="#"]textlink[/a]
[a href="#" class="imagelink"][img src="blah.png" alt=""][/a] - dimatt, on 10/12/2007, -0/+1thank goodness for google cache '-'
- Rkstar, on 10/12/2007, -0/+1i've been begging for the background-size feature forever. And according to the page
http://www.joostdevalk.nl/code/css3-preview/background-size.html
It only works with Webkit, aka Safari. But even their demonstration of it doesn't work with Safari. Does anyone have any more information about how to make it work? - richardyork, on 10/12/2007, -0/+1Firefox already supports CSS 3 multiple-columns (with the -moz- vendor prefix). Surprised he didn't mention this in the article.
http://developer.mozilla.org/en/docs/CSS3_Columns
http://www.w3.org/TR/2005/WD-css3-multicol-20051215/ - zootm, on 10/12/2007, -0/+1@pcgeek
That page is very, very out of date, I'm afraid.
@Nanobe
Any chance of some Safari/Konqueror compatibility reports put on that page? Very thorough otherwise. :) - Nanobe, on 10/12/2007, -0/+1zootm: I plan to. Unfortunately, I don't have direct access to a mac. I do have access to Konqueror, but Konqueror and Safari have diverged too much to be considered the same. I'll likely have to resort to a virtual machine to test Safari, which will be slow and painful. But I do plan to get the data one way or another.
- pornel, on 10/12/2007, -0/+1nightly.webkit.org
- Bogtha, on 10/12/2007, -1/+2> equal height columns? nope, still have to use unintuitive combinations of ridiculous padding combined with ridiculous negative margins.
Sorry, but you don't know what you are talking about. Equal height columns were a solved problem in CSS 2, with the display: table-cell property value. The reason why they are unusable is because Internet Explorer (even v7.0) doesn't support this part of CSS.
So adding more stuff to CSS 3 to do the same thing would not only be redundant, but it wouldn't solve the problem because Internet Explorer still wouldn't support the CSS 3 stuff. The only people who can fix this are Microsoft - by fixing Internet Explorer; or web surfers at large - by using a different browser. - GlassCasket, on 10/12/2007, -0/+0This is all some really neat thing for CSS3, but it's a shame it'll take an eternity for all browsers to reconise CSS3. :(
Or even for that matter, for all browsers to render all the CSS properly. - twilightown, on 10/12/2007, -1/+1I'm looking forward to multiple columns
- bradleyland, on 10/12/2007, -0/+0You can have rounded corners with no images right now.
http://www.html.it/articoli/niftycube/index.html - MrSunshine, on 10/12/2007, -0/+0> The rounded corners are a bit of a god send.
Yeah, instant-Web2.0. But will it have anti-alias? - ousted, on 10/12/2007, -0/+0"box-sizing" was invented by IE5 for Mac, not by Mozilla.
- pingveno, on 10/12/2007, -3/+3No good. All links on the mirrors just lead to the poor guy's web site
- Uruviel, on 10/12/2007, -1/+1@rastan
-moz-border-radius that is - dvdgee, on 10/12/2007, -2/+2> Sorry, but you don't know what you are talking about. Equal height columns were a solved
> problem in CSS 2, with the display: table-cell property value. The reason why they are
> unusable is because Internet Explorer (even v7.0) doesn't support this part of CSS.
You couldn't have proven my point more thoroughly if you were trying. So, in the move away from table based design, in order to create a basic grid structure, we need to specify that it *is* a table in CSS? Yes, that's a really clear, succinct approach. Not to mention that you lose the ability to indepently source-order your code and can't float blocks with "display:table-cell". This method is just as ugly a hack as faux-columns using background images, or the padding/negative-margin combos, or any other method.
Don't be a fanboy. CSS is useful and a great idea, but has severe shortcomings when it comes to layout. The original vision of the web was that an average person, not a paid professional, would be able to mark up web documents. table-based design may have been clunky, and arguably inaccessable, but it was linear in its rationale, and anybody with a piece of paper, a pencil, and a ruler, could figure out how to create most common real-world layouts. -
Show 51 - 75 of 75 discussions
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official 
© Digg Inc. 2009
— Content created and posted by Digg users is