Slashdot Mirror
A New Era in CSS Centric Design?
byrnereese wonders: "The media never fails to point out how the age of Web Two-Point-Oh has helped to drive the adoption of Ajax into the Internet industry, but rarely does anyone point out that it has also help popularize CSS-centric design practices -- the Slashdot redesign being only one example. But now that we, as programmers, feel comfortable ditching the use of font tags, finally grok div's, understand absolute vs relative positioning, and can work around all of IE's CSS bugs, what is the next step for HTML and CSS? Several standards or conventions seem to be coming to forefront: one is building standards around the HTML structure itself so that wildly different designs can be achieved via style-sheets alone (e.g. CSS Zen Garden and The Style Contest), the other being the standardization of CSS classes (e.g. micro-formats) so that semantic meaning can be derived from the class name we use to label our content. Both show an interesting potential for how this technology is evolving. So here is the question for all the visionaries out there: where is this taking us? What's next for HTML? What's next for CSS?"
Every time there is a story on CSS here, we always get a bunch of people who say CSS is useless and that table tags are the only way to design a site. I'm always amused by people who have been living under a rock (or haven't updated their skill sets) for the last couple of years. CSS Zen Garden should stand as solid proof that CSS works, and can produce some gorgeous and highly usable results (and check out the Zen Garden's Zen of CSS Design ) for a description of general aesthetic.
CSS is broken in some obscure ways, I've encountered some limitations with styling elements with a certain xml:lang in documents whose body tag has a different xml:lang, but for 99% of sites, it's ready now.
Slashdot will adopt in 5 years ... ;-)
Hulk SMASH Celiac Disease
and the long wait for CSS 3.0.
must... stay... awake...
What's next?
XHTML2 and CSS3
But XHTML2 can't be a reality until IE can parse XHTML, or IE loses a lot more market share. (no, it can't, it can parse pretend XHTML that's served as text/html, and you can't serve XHTML 1.1 or XHTML2 as text)
div#advertisement-title {
display: none;
}
div#advertisement-content {
display: none;
}
div.ad1 {
display: none;
}
div.ad2 {
display: none;
}
div.ad3 {
display: none;
}
div.ad4 {
display: none;
}
div.ad5 {
display: none;
}
div.ad6 {
display: none;
}
div.ad7 {
display: none;
}
"So here is the question for all the visionaries out there: where is this taking us? What's next for HTML? What's next for CSS?""
S-expressions
if slashdot links itself in a story, then does it cause a /. effect on itself? seems like an endless loop of pain.
How Jaded Are You?
"Slashdot will adopt in 5 years ... ;-)"
CowboyNeal has his tubes tied?
The main reason CSS has taken off is that one can feasibly write one sheet that mostly works in the mainstream browsers.
Back when one had to code for multiple versions of IE with poor CSS support it was just easier to hack together a mix of HTML layout and some inline CSS embellishments.
IE7 still has some significant CSS issues, but we're getting much closer.
Imagine when IE8 and Firefox 2 both support CSS3 nearly identically!
Amazing magic tricks
This is offtopic, but I've just taught myself a bit of html and css and while it seems pretty capable it just feels like a huge kludge. I can set my page layout using css and html divs but this results in the styling being in the css sheet, the data in the html and the layout sort of strewn between the two with the result that there is no one document I can look at which would give me a good idea whatthe page will actually look like. My question then, seeing as there might be a few people in the know on /., is there any plan for the introduction of some sort of layout sheet? Formatting could go in css, data in the html (or links to it anyway) and page layout in a third document (lss?). Are there good reasons why this is a bad idea? If so, why is the current set-up better? Just interested.
Cheers, df
CSS is more than just web. It's XUL, it's XAML, and it's Boxeley(For all those AOL nerds out there). It's also in several smaller toolkits, and it's starting to pop up kinda everywhere. It's a good thing.
First, let's get a couple things straight:
What's next won't even be achieveable for two to three years. The other browsers will continue to implement standards as they are drafted while IE continues to struggle with catching up to 1998, much less 2006. This involves several elements:
CSS3: This is the next generation style and layout methodology. Even though some properties will behave vastly differently from their 2.0/2.1 versions, the vast amount of new properties will entice designers with the possibility to do more (gradients, shadows, masks, text rotation, and more). Because, as Daniel Glazman blogged months ago, CSS has no verioning mechainsm, designers will be able to pick and choose what they want to use.
XHTML2: This is the next generation for web page markup itself (the canvas to the paint of CSS). Further steps towards semantic bliss include semantically-relavant tag attributes, more versatile workhorse attributes (add href and src onto any tag), and a more streamlined namespace.
XHTML2 has some competition, however, in the form of HTML5. While I can understand frustration at the glacial speed of the W3C at producing new documents, WHATWG seeks to damage most of the progress made since HTML 4.01. Apparently "tag soup" becomes an option again, which means few people will bother to write valid, correct pages (a key element for machine readable content to work).
The canvas element and SVG bring new ways of displaying graphical stuff to be interacted with. XForms will finally allow data input to happen in a non-archaic way.
And when this all happens, the table layout trolls and Dreamweaver monkeys will be two tech generations behind. More work for those of us who have real skill.
I'm totally fed up with absolute positioning. That was a terrible idea. It was a bad idea in TeX, it was a bad idea in PostScript, and it is a bad idea in CSS. Now font width assumptions are built into the layout. We have text that runs off the page boundaries, buttons that move when clicked, and browser-specific dreck in the page markup. Giant step backwards. Tables were a good feature and they need to come back.
Both parent and grandparent posts make good points. I used to do tables only, but finally got handed the Zen of CSS Design book by a designer and decided it was time to learn. I'm a programmer, not a design guy. I was really impressed with how much could be done with CSS, but like the parent says, CSS sucks at layout. I like the fact that it seperates the content from the style. However, after spending a couple days trying to get a couple pages laid out purely using div tags and CSS, I ended up using a couple tables to get things the way I wanted them. It kinda felt like I was cheating after looking at all the cool stuff people were able to do with Zen Garden, but is it really cheating to mix tables and CSS? No. Use the best tool(s) for the job and your life becomes much easier.
2. Proper support from IE for PNG transparency, or an equivalent format that everyone can accept. No workarounds. The ability to do 24-bit color layers with alpha would be a huge leap forward in design. In fact, it looks damned good when done in Firefox.
These are the two things that make me shake my head. PNG support, because it's just MS being stubborn and dumb. The non-suare thing because I'm not sure how long designers have to develop workarounds before the industry just makes the workdarounds out-of-the-box features.
I scream. You scream. I assume that means we're both acquainted with the problem. We proceed.
Vertical alignment. I'm using more and more CSS as I learn it, but there are lots of nice stretchy, vertically centred layouts that CSS's broken vertical-align will not handle. There are hacks but, ironically, require the use of tables. Tables also render faster than a lot of CSS equivalents.
Sure, CSS is fine for most text content. But for things like image galleries, some layouts are impossible without tables.
HTML is a markup language; CSS is a stylesheet language. Neither is a programming language.
Reporter: What do you think of CSS-centric design?
Gandhi: I think it would be a good idea.
AJAX is a hack that ignores accessibility and the Semantic Web. Everybody using AJAX has thrown accessibility out the window for a corner of the market. Web 2.0 is about finally deploying applications that act as gateways to something else somebody else might want, like a search database, map database, photo database, etc., even an online spreadsheet collaboration too.
The Semantic Web is really what we should want. Web 2.0 is about commercializing databases. The Semantic Web is about publishing those databases for true neural-like awareness within the web. AJAX and Web 2.0 Balkanize the Semantic Web. If the USGS published their map data publicly, we could all be writing our own map systems around it. That's what the public could have done for us.
Yes, thank you Google for hacking the web apart, teasing us with almost useful apis to your database, then closing them up or requiring payment for them.
Thank you,
You assholes.
I actually wanted to use the Internet for something useful, but as we see, it's all about the bottom line, not providing access to information.
Like any tool, CSS can be abused. Absolute positioning is a powerful tool that is easy to misuse in WWW environments because it tends to be used with pixel units to create print-centric, rigid designs that can't be scaled/zoomed (e.g. in pre-IE7 browsers, Firefox). Pixels may be great for kiosks and other fixed width/height environments but there're not good for use with current mainstream browsers - but use 'em' and 'percentage' units and you can automatically create designs that resize to the viewport and the user's preferred font size without the problems you describe.
Something I advise developers new to CSS is to avoid using absolute positioning until they clearly understand the side-effects of applying it and to generally treat it as a last resort in the CSS toolbox - kind of like 'if-all-else-fails try the sledgehammer'. With a well structured document as a foundation (headings, lists, et al) then a good understanding of floats, margins and clear can do most layout tricks for you, but if there's no other way but to use absolute positioning then use it with 'em' and 'percentage' units again to keep it scaling. Granted that this is difficult to do if developers use todays WYSIWYG authoring tools - almost by definition.
Not a giant step backwards by any means, developers of problematic sites just need to think a bit more about the best use of the tools in the CSS toolbox and a bit more about designs that scale. After-all, it's possible to create rigid layout problems with table-based design too.
I've recently done a load of cross-browser Web 2.0 stuff. Working on a Mac my primary platform is Safari which, as many will know, is one of a very limited number of browsers to pass the ACID test. It took me quite a while to get to grips with the idiosyncrasies of CSS itself (the specificity rules about which style will be used can be confusing and slightly counter-intuitive sometimes) but generally working with Safari was fine.
I checked and validated my HTML and CSS code against the W3C validation tools, and they all passed, which was nice. The next step was obviously to make sure that they rendered well inside IE and Firefox... This is where the pain began.
There are bugs and omissions in both IE and Firefox's CSS support. Quite how bad these failings will affect your page depends a very great deal on what HTML and CSS you are trying to use.
Personally I found it consistently easier to work around the failings of IE; I could get my new bits of HTML and CSS to work perfectly in IE with only minimal changes.
Whilst the reputation of Firefox is better, I consistently found it much harder to get my pages working properly. Trying to get items to display on the same line inside Firefox without getting forced below the preceding item can be incredibly tough, often requiring a custom work-around. In one case I found myself forced to throw away my (div using) code and re-write it using tables, since even after several hours of trying I couldn't get Firefox to render my page acceptably.
This seems like a good page that outlines the bugs in Mozilla/Firefox:
http://www.richinstyle.com/bugs/mozilla.html
Unfortunately there's not always clearly documented work-arounds for these bugs...
Oh for the bright future when all the browsers properly support CSS... The life of a cross-browser web site producer would be less painful.
I'm interested in expanding my CSS skills, and to be fair, IE did drive me close to insanity.
I made the daft mistake of building a website on a linux box with Firefox, then testing it with IE afterwards. I definately recommend checking with the big three browsers at all times.
I also bought a really good book,
"CSS MASTERY
Advanced Web Standards Solutions"
by Budd, Moll and Collison. ISBN 1-59059-614-5 (www.friendsofed.com)
I've found it far more useful than w3 schools website - if only because it has dedicated chapters detailing the cross browser issues. My only criticism is that it seems to cover everything but fonts. I know it says Advanced in the title, but a very small chapter on fonts would really make this book feel complete. Still, I'd definately recommend it to people who are still using table based layouts.
Slightly offtopic, but can anyone suggest some good reading on CSS Centric design? Also, what practices should a good web dev put into place in a modern website? Thank you.
"Thanks for all the money you paid to us. We've used it to buy off ISO among other things" -Microsoft
Since we're talking about CSS anyway, maybe somebody could explain to me what happens in IE with the following CSS:
div#left {width: 4em; height: 1.5em; float: left;}
div#right {width: auto; height: 1.5em;}
IE renders them next to each other and on the same line (as intended), but there's a ~4 pixel gap between these two boxes. I checked margins and borders, that's not the problem. To fix it, I placed these two into another div with the background, but that for some reason seems to screw up Opera/Firefox. This wasn't hard to deal with since I generate the pages with perl cgi, but I don't like the unnecessary complication. I did look through a lot of IE-specific CSS bugs, but couldn't find anything. Maybe it's a feature and not a bug, in which case I still need to get it to render the way I want it to. Thanks.
The other effect of proper Divs are AJAX related. That's what allows scripts like Greasemonkey and all the Google Maps mods to work... A page written by somebody else can cherry pick interesting data by Div tags rather than formating. Also, look at print preview for a different CSS applied to the same HTML to make a neatly printed page rather than the usual chopped up junk you get when trying to print Table/Frame based pages that waste paper for headers, or chop off the meaningful parts of the page because the decorations make a mess.
Doesn't anyone question the twisted logic of the accessibility fascists? Isn't it the responsibility of the screen-reader manufacturers and text browsers to come up with something that can handle table-based layouts rather than insisit the vast majority of websites be re-engineered to cater for a tiny minority with inadequate browsesrs? Note, I'm not aiming here at genuine accessibility issues like colour contrasts etc., just the tired CSS layout crap. CSS layout is and always was ****ed. That's why tables are still commonly used. CSS layout was originally CSS-P - bascially an afterthought/hack.
Ever heard of templates? They make a lot of the CSS redesign issues redundant.
I'd post this on the "omg ponies /. redesign" thread, but it's closed.
/.'s new CSS? I mean, it's okay for the most part, like a new haircut. It doesn't turn Helen Hunt into Jessica Alba. But the part that I don't think I can live with long term is the switch to Verdana from Times. Say what you like about Times -- and the most wounding thing is perhaps "it was just the default. So that font is called 'Times', eh?" -- it's a remarkable print typeface and I got used to seeing /. in crisp serifs and authentic italics over the past decade or so.
/.'s bland sans-serif content seriously and it has even made me reluctant to post in my journal (and guys, there are some lingering bugs too. Try the <I> tag in a journal entry?) I need to switch to a serif font, at least. What's the easiest way to do this?
What can you do if you don't much like
Laugh if you will but I am finding it subconsciously hard to take
Actually there are other things I think could be improved in the new CSS (introducing a couple more colour accents would be very practical) but that's for another time.
you had me at #!
Why are you trying to argue with people who do web design as a living to tout that you don't care how it's done, as long as you can quickly knock out a website that obviously has no need for professional development?
These are people who do web development day in and day out of their lives, and you're trying to argue with them to support your simple and limited version of web design? Thats like saying "Why should I learn how to use Photoshop when I can just knock out an image in MS Paint in a fraction of the time it would take me to learn how to use Photoshop? You don't need a damn book to learn MS Paint, but there are plenty of books out there for Photoshop!"
There's no point in addressing your argument because it shows you don't care about web design - you only care about getting information onto the world wide web, not it's presentation. So, please, leave ths CSS vs. tables argument to the people who actually care about creating the best presentation for their website, those who obviously care more than to just "knock a page together."
I was about to post exactly the same thing.
And apparently I'm on some kind of mod point blacklist, I haven't had mod points in months.
GCHQ Quantum Insert installed. If only our tongues were made of glass, how much more careful we would be when we speak
Do it yourself then. I'm not huge about the new redesign, but I was about one of the contestants, so I simply use the Stylish plugin to apply that stylesheet to the page. That's what User CSS is for. Stop bitching and fix it yourself :)
I knew I'd probably have to roll my own. I was curious as to the mechanisms available for overriding it. I'll have to look into browser support... (Pity you can't attach a custom css to your profile, then it would go wherever you go, with no browser support required, eh.) Speaking of bitching - where *is* the "I hate the new CSS" thread? I can't be the only one.
you had me at #!
I used to be set to "Light Mode", which seems to have been translated to the combination of "Simple Design" and "Low Bandwidth" in the new design. This also changed considerably with the resdesign... but I still have a serif font. (I think just because it's my default.) The settings are under "Preferences", "Homepage".
Share and Enjoy: 09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0
That's probably the easiest way of getting Times again (cool, thanks). But there are some less appealing side effects...
you had me at #!
If you are using Firefox, install the Stylish extension and use this user stylesheet. It changes the font size, the font family and the line-height back to normal (i.e. what is configured in your browser as the default, which is what Slashdot used to use).
Bogtha Bogtha Bogtha
I think it would make things so much simpler for everybody, especially if they used firefox or another free (freedom) browser as a base. Maybe it would force others to fill the gaps.
In fact in my perfect world they'd just code a friggin good xhtml/css engine, make binding for x languages, and provide it for free to every browser maker or whatever... Seriously, I know it won't happen, but it would be such a step forward for the web in general.
Choice is good, competition is good, but not in this particular area. You'd still be able to chose between a lot a browser, but their rendering would be consistent.
not an endless loop of pain:
"A whole new spectrum of pain, like a rainbow!" ~Random Barbarian from "Korgoth of Barbaria"
Pagan? Geek? Check out #paganism on Freenode IRC
You (and many other people) are trying to design INTERFACES.
Web pages (and CSS) were originally designed for marking up DOCUMENTS.
There needs to be an HTML-like variant for designing interfaces. You know, where you aren't fooling yourself into thinking that the display device is anything but a monitor on a computer. No cell phones, no text web browsers, no printers, MAYBE pdas.
You could use AJAX, SVG... get rid of a lot of the beat-around-the-bush tag definitions.
In the interim I seriously advise anyone who wants status bars and toolbars and buttons and screen-edge relative positioned content to consider FLASH.
Yes Flash.
Flash and actionscript are perfect. And you don't even need anything special in the backend... actionscript can launch GET/POST requests to interface whatever you got, it's just ECMAScript. It's got HTML and XML parses and such, so it's well suited.
THIS THING CAN TURN ON A DIME, MACROSSZERO STYLE ALSO FUCK BETA, ~NYORON
How well does your CSS work in IE6 or even IE5 (still in wide use)?
Now show me the CSS for an N-column layout, where a separate static stylesheet is used in conjunction with dynamically generated content that may have varying numbers of columns based on selections provided by the user. And these columns cannot be allowed to flow down to the next row, as that would confuse their meanings.
Of course the biggest problems designing for the web are broken browsers, especially IE6 (it doesn't even support CSS tables). Nevertheless, CSS itself still has issue. Not everything can yet be done by CSS, and many of those things can still be hacked with at least some HTML that doesn't follow the semantic intentions.
Here's another example. Write the CSS code to show how to produce a drop shadow effect behind a box with a border. Now expand that so that with pointer hover, the drop shadow is made to appear higher. Now fix the glitch where the rising box oscillates when the pointer is at just at the right spot in the 2 split corners (hint: put the whole thing in a box and use :hover on that box). That's all easy enough. The real challenge is to make all this work on an existing HTML file that has only ONE layer of DIV elements wrapping the content to be styled this way.
Style ... any style you might think of ... should never need to depend on creating multiple levels of DIV elements in the HTML. It should be designed so the entire style, however complex, can be applied as a unit to a single element by class or id. Your markup semantics should have nothing more than the elements to mark up what is what. The markup should have to worry about how many layers need to be used to create the desired style. CSS isn't there, yet, and since they aren't even considering this for CSS3, and the long times it takes for Microsoft to catch up to complying with standards in a reasonably bug free way, I'm afraid that CSS will remain broken for years, maybe even a decade or two. Fortunately, most of these hacks are relatively benign additions to HTML.
now we need to go OSS in diesel cars
...when it comes to standards compliance, I'm not sure you can hold out "professional web designers" as some sort of ultimate authority on anything.
Besides, the web is about CONTENT, not PRESENTATION. To me, as an end-user, it's far more important that a site is easy to use and navigate with the browser I happen to be using, and I couldn't care less about the kind of flashy customizable interfaces that most "pro" designers are spending much of their time with.
Concentrate on the cake, not the frosting. The latter is nice, and perhaps for commercial sites it sells, but a crappy underpinning is gonna drive away more customers than your pretty frosting brings in!
Mainframe/UNIX Bit Twiddler and long time Windows/Linux Hobbyist.
The Theorem Theorem: If If, Then Then.
best show ever.
Slashdot not using CSS was the equivalent of someone still using an Amiga in 1999. It's not an indication of anything except Slashdot being waaaay behind the curve. CSS as been *the* way to go for a long time now.
Well I sure hope the next step is replacing HTML with XML and having everyone use both CSS and XSL for formatting.