CSS feature requests (was: why does z-index need a defined position to work?)

Discussion taken from the thread, why does z-index need a defined position to work?

What arguments would the contructs take? Would they be querying the cascade or other aspects of CSS, or could this be achieved via a server side language with the construct values being determined from the server-side implementation?

There’s been a lot of talk of feature queries in CSS on www-style recently, with a [URL=“http://lists.w3.org/Archives/Public/www-style/2009Dec/0130.html”]brief proposal submitted to the list by one of the Working Group’s Invited Experts. As you can tell if you read into the discussion, utilizing an at-rule for this purpose is favoured over using a syntax similar to !important (someting like !support). Querying feature implementations, will be invaluable when managing the varying browser support of prominent modules such as [URL=“http://www.w3.org/TR/css3-layout/”]Template Layout. Is this what you mean?

Requests for float:center are always popping up www-style; you can follow these discussions by searching the mail archive. On a general note, the up-coming layout modules will supersede the float mechanism, and I’d suggest that once we’re able to specifically define the behavior of ‘float:center’ (which is more complex in it’s logic than float’s current values) and for this value to be implemented cross-browser, these more advanced modules should be near to implementation [crosses fingers].

See above

The general consensus is that a parent selector of this kind would be too ‘expensive’ from an implementors point of view, and would sacrifice rendering performance generally. I’ll try and dig out a particular email that describes the reasoning in detail.

We tackled float:center in a recent CSS quiz and Erik J came up with a brilliant solution for Firefox 2+ only. However it shows exactly how we would like float:center to work :).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Quiz #18a v3 / erik.j</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
h1, h2 {
    margin:20px -100%;
    text-align:center;
    font-weight:400
}
#container {
    margin:auto;
    padding:.4em 30% 0;
    width:30%;
    font:87.5%/1.6 verdana, arial;
}
#floatbox {
    float:center; /* :-D */
    position:relative;
    margin:20px 0 -12em;
    height:11.8em;
    background:#99f;
}
.float1 {
    float:right;
    margin-left:.8em;
    width:100%;
    line-height:.01;
}
.float2 {
    float:left;
    margin-right:.8em;
    width:100%;
    line-height:.01;
}
.float3 {
    float:right;
    margin-top:-.02em;
    width:49.99%;
}
.float4 {
    float:left;
    margin-top:-.02em;
    width:49.99%;
}
.wrapbox {
    margin-left:49%;
    width:2px;
}
.wrapbox .float1 {
    margin-left:.2em;
}
.wrapbox .float2 {
    margin-right:.2em;
}
p {
    border:.2em solid #f66;
    margin:-.4em -99.99%;
    padding:.2em .8em 1.6em;
    background:#ffc;
    text-align:justify;
    line-height:.01;
}
</style>
</head>
<body>
<div id="container">
    <h1>Does FF support #floatbox{float:center}?</h1>
    <h2>Test changing browser-width and user font-size and say.</h2>
    <div id="floatbox">
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
    </div>
    <div class="wrapbox">
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
        <div class="float1">&nbsp;</div>
        <div class="float2">&nbsp;</div>
        <div class="float3">&nbsp;</div>
        <div class="float4">&nbsp;</div>
    </div>
    <p>This is some text that will flow around both sides of the image. The text can still be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float: center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!</p>
</div>
</body>
</html>



Try it out and be amazed :slight_smile:

In all honesty the above is probably the cleverest piece of coding I’ve ever seen in CSS.:wink:

I also had a crack at float:bottom and I can get the look of what I’d like but only in IE8.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
    writing-mode:lr-bt;
    text-align:justify;
    width:50%;
    margin:auto;
    padding:10px;
    border:5px solid red;
}
span {
    width:100px;
    height:100px;
    float:right;
    background:red;
    margin:10px 10px 0;
}
</style>
</head>
<body>
<div class="test">
    <p><span>float</span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</body>
</html>


Try that in IE8 and the float behaves how we would like float:bottom to be implemented.

Yes I read that some time ago (David Baron in 2004) but I have seen the sentiment r[URL=“http://www.andybudd.com/archives/2006/01/what_i_want_from_css3_part_2/”]epeated often.

Ja they worry about dynamic content a lot. I’d take a simple one, please, with no garnish, for static sites.