The future of CSS?

I am finding that proper coding of CSS with the proper DOCTYPE allows coding without many of the "hacks" that I previously thought were required. I am actually in the middle of developing a site (of my own) and the CSS does not have one single "hack" included. No "\width" or "w\idth" crap of any kind. It is taking some relearning/rethinking of my CSS coding, but I think it is well worth the effort all and all.

As for the new tags suggested, nothing spectacular, but definitely a nice step forward. I would probably use the multiple BG's and border-radius more than any of the others, but who knows.

...and for the record **** the <blink>tag!</blink> but bring on the >BLING!<

I finally took Catbert's advice and started looking into yui. I really like the CSS reset. I can see them being a big part of my dev future.

I only watch CSI Miami, never the original. I thought this was a lounge discussion.

Quote:

---

Originally Posted by EVPohovich

...and for the record **** the <blink>tag!</blink> but bring on the >BLING!<

---

The only legitimate use of the greatly loathed <blink> tag: "Schroedinger's Cat is <BLINK>NOT</BLINK> dead." :D

Fredi

Quote:

---

Originally Posted by jAQUAN

I finally took Catbert's advice and started looking into yui. I really like the CSS reset. I can see them being a big part of my dev future.

---

Yep, CSS reset is the first line of code/file for all my projects!

been using Meyers reset and more recently reset reloaded for a while now... anyone not using a reset in CSS is just asking for unnecessary headaches ;)

The only hack I have in my CSS is the > in IE6. Apart from that, nothing is necessary.

One thing I want in css is the scale-9 effect in flash. Oh, and the flex property in most GUI languages.

I currently use Tripoli (with two small modifications for ul ul and blockquote) for the reset and default typography.

Fredi

ok... can somebody edumucate me on CSS reset?

In very simple terms, it sets everything display-wise to zero, removing the different "default" margins, spacings ...etc that the different browsers display content with.

The result is you're basically starting with a "clean slate" on which to build your CSS code.

Quote:

---

Originally Posted by gerbick

ok... can somebody edumucate me on CSS reset?

---

http://www.smashingmagazine.com/2007...-from-scratch/

Fredi

Here's the one that I currently use, though looks like from some of the above comments there's a few other versions I need to compare to.

Code:

---

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
        background: transparent;
}

/* remember to define focus styles! */
:focus {
        outline: 0;
}

body {
        line-height: 1;
        color: black;
        background: white;
}

ol, ul {
        list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
}

caption, th, td {
        text-align: left;
        font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}

blockquote, q {
        quotes: "" "";
}

---

Just a quick example of how cool YUI is. I needed a dynamic div height so I could pop in scroll bars if the user resized the window below the content limit on an otherwise full screen flash movie.

It was as simple as:

Code:

---

...
<link rel="stylesheet" type="text/css" href="js/yui/build/reset-fonts-grids/reset-fonts-grids.css" />
<script type="text/javascript" src="js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript">
  var fitBars = function() {
    var viewport = [
      YAHOO.util.Dom.getViewportWidth(),
      YAHOO.util.Dom.getViewportHeight()
    ];
    if(viewport[1] > 740){
      YAHOO.util.Dom.setStyle('flashcontent', 'height', viewport[1]+'px');
    }else{
      YAHOO.util.Dom.setStyle('flashcontent', 'height', '740px');
    }
  };
</script>
</head>
<body onload="fitBars();" onresize="fitBars();">
...

---

works in all browsers.

Anyone seen this: http://sandbox.pocoo.org/clevercss/

Looks to be a very interesting way to "code" CSS.

Fredi

Very interesting indeed. I don't see those projects being very portable though. Unless you changed over to it completely it would be a pain to mix and match old code.

Quote:

---

We should be focusing on the right concepts. Web layout standards so far have taken a lot from the history of formatting printed documents and very little from the history of designing user interfaces. We need more of a balance: flexible box layout used for user interfaces should take higher priority than advanced print-based features like grids.

---

http://dbaron.org/log/2007-09#e20070920a

Quote:

---

Originally Posted by David Baron

It would be nice to know what, exactly, he wants from it. Are macros that contain declarations sufficient? In what cases would you use such macros? I think for the group to make progress on something like macros in CSS we need a wiki page that lists the important use cases. Then we could examine particular proposals, see how many of the use cases they meet, how hard they are to use and to implement, and what issues they might cause for maintaining CSS over time, for editing tools, etc.

---

Are you FK'ing kidding me? What does he want from it!?
How hard is it to understand that we need, as a starting point, an app that acts like a page layout program where we are free to drag, resize, place images, style type, adjust layers and set overflow links. And after that we should be able to click File -> Save As and be done with it. We sure as FK don't need a voice style.

It's all the trying to make css too smart thats FK'ing it up. The width of a border or padding should have jack squat to do with the width of the box its on. How in the world did everyone screw that up so badly? It's just coordinates on a pixel grid for christ sake.

What do we want to do with it!? NOTHING you pompous FK! We don't want to touch it period! FK!

Here's the number one problem right now.
http://www.w3.org/Consortium/Member/List

Quote:

---

Here's the number one problem right now.
http://www.w3.org/Consortium/Member/List

---

And most of there sites won't validate. What does that tell you?

Jaquan, we need a new stylesheet language. Nobody ever said CSS had to be the only one. all you have to do is enter <style type="text/myStyleShet"> in your html.

I've always wanted to make a common sense style sheet (CSSS), and it would probably have these features:
*layout: hbox, vbox,
*position: absolute, relative, static, nested (relative to the parent element)
*flex: ###
*cropping: start, end, center (decides where ellipsis will be entered when text is too small)
contain-float: true, false (whether or not a floating element should expand the size of the container)

XUL has most of these features, which were necessary to make an application like Firefox.

that's all over my head. :)