There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation

This [fiddle][1] should work like what you need, but will not for now.

Unfortunately, it&#39;s still a draft, and isn&#39;t fully implemented on major browsers.

It does work for `content` on pseudo-elements, though.

  [1]: http://jsfiddle.net/CaioToOn/wp7Wc/4/

You can create with javascript some css-`rules`, which you can later use in your styles: **http://jsfiddle.net/ARTsinn/vKbda/**

    var addRule = (function (sheet) {
        if(!sheet) return;
        return function (selector, styles) {
            if (sheet.insertRule) return sheet.insertRule(selector + &quot; {&quot; + styles + &quot;}&quot;, sheet.cssRules.length);
            if (sheet.addRule) return sheet.addRule(selector, styles);
        }
    }(document.styleSheets[document.styleSheets.length - 1]));

    var i = 101;
    while (i--) {
        addRule(&quot;[data-width=&#39;&quot; + i + &quot;%&#39;]&quot;, &quot;width:&quot; + i + &quot;%&quot;);
    }


This creates 100 pseudo-selectors like this:

    [data-width=&#39;1%&#39;] { width: 1%; }
    [data-width=&#39;2%&#39;] { width: 2%; }
    [data-width=&#39;3%&#39;] { width: 3%; }
    ...
    [data-width=&#39;100%&#39;] { width: 100%; }


Note: This is a bit offtopic, and not really what you (or someone) wants, but maybe helpful.

As of today, you can read some values from HTML5 `data` attributes in CSS3 declarations. In [CaioToOn&#39;s fiddle][1] the CSS code can use the `data` properties for setting the `content`. 

Unfortunately it is not working for the `width` and `height` (tested in Google Chrome 35, Mozilla Firefox 30 &amp; Internet Explorer 11).

But there is a [CSS3 attr() Polyfill][2] from Fabrice Weinberg which provides support for `data-width` and `data-height`. You can find the GitHub repo to it here: [cssattr.js][3].


  [1]: http://jsfiddle.net/CaioToOn/wp7Wc/4/
  [2]: http://codepen.io/FWeinb/pen/Dsdkr
  [3]: https://github.com/FWeinb/cssattr.js

I have a textarea which is contained in a div as I have jquery hint and wanted to use opacity without changing the border.
There is a visible vertical scroll bar how I only want this displayed when I am typing in the text field and it goes beyond the container. I have tried overflow: auto; but does not work.

Textfield:

    &lt;label&gt;
        &lt;div id=&quot;name&quot;&gt;
            &lt;textarea name=&quot;message&quot; type=&quot;text&quot; id=&quot;message&quot;
                title=&quot;Enter Message Here&quot;
                rows=9 cols=60 maxlength=&quot;2000&quot;&gt;&lt;/textarea&gt;
        &lt;/div&gt;
    &lt;/label&gt;

Styles:

    #name { 
        border: 1px solid #c810ca;
    	width: 270px;
    	height:159px;
    	overflow: hidden; 
    	position: relative;
    	}

    #message {
    	height: 400px;
    	width: 235px;
    	overflow: hidden;
    	position: absolute;
    }

how to hide a vertical scroll bar when not needed

Why doesn&#39;t `&#39;example&#39;[999:9999]` result in error? Since `&#39;example&#39;[9]` does, what is the motivation behind it?

From this behavior I can assume that `&#39;example&#39;[3]` is, essentially/internally, not the same as `&#39;example&#39;[3:4]`, even though both result in the same `&#39;m&#39;` string.

Why does substring slicing with index out of range work?

    width: attr(data-width);

I want to know if there&#39;s any way it&#39;s possible to set a css value using HTML5&#39;s `data-` attribute the same way that you can set css `content`. Currently it doesn&#39;t work.


----------


HTML 

    &lt;div data-width=&quot;600px&quot;&gt;&lt;/div&gt;

CSS

    div { width: attr(data-width) }

CSS values using HTML5 data attribute

<pre><code class="hljs language-css">width: attr(data-width);
</code></pre>
I want to know if there's any way it's possible to set a css value using HTML5's <code>data-</code> attribute the same way that you can set css <code>content</code>. Currently it doesn't work.
<hr>
HTML
<pre><code class="hljs language-css">&#x3C;div data-width="600px">&#x3C;/div>
</code></pre>
CSS
<pre><code class="hljs language-css">div { width: attr(data-width) }
</code></pre>

I have a full screen fixed background image. I would like the text in my scrolling div to fade out at the top, presumably by applying a gradient mask to the background at only the top part of the div. I&#39;m interested in having the text look like it fades away as it the user scrolls down, but still having a large area of full opacity for actually reading the text.

I know there are masking options in the webkit, but I can&#39;t find a way to fade through to the page&#39;s background **over** the contained text only applying the gradient to a small portion of the element.

Here&#39;s an image of the desired result:

[![][1]][1]


  [1]: https://i.stack.imgur.com/l8awL.png

Using CSS, can you apply a gradient mask to fade to the background over text?

I have the following code:

      &lt;span&gt;
         &lt;svg height=&quot;32&quot; version=&quot;1.1&quot; width=&quot;32&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; style=&quot;overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;&quot;&gt;
            &lt;desc&gt;&lt;/desc&gt;
            &lt;defs/&gt;
            &lt;path style=&quot;&quot; fill=&quot;#333333&quot; stroke=&quot;none&quot; d=&quot;M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z&quot;/&gt;
          &lt;/svg&gt;&amp;nbsp;
      &lt;/span&gt;

Is it possible to change the fill color of the SVG path with CSS or some other means without actually changing it inside the path tag?

Can I change the fill color of an svg path with CSS?

I have to add a contact form to a static website. I already got some experience with forms, done 2 or 3 using django/python, but sadly using django is not an option here, it has to be added to a static website. Could you please tell me what options do I have?

Adding contact form to a static website

I have a div element on my page with its height set to 100%.  The height of the body is also set to 100%. The inner div has a background and all that and is different from the body background. This works for making the div height 100% of the browser screen height, but the problem is I have content inside that div that extends vertically beyond the browser screen height. When I scroll down, the div ends at the point at which you had to begin scrolling the page, but the content overflows beyond that. How do I make the div always go all the way to the bottom to fit the inner content?

Here&#39;s a simplification of my CSS:

    body {
        height:100%;
        background:red;
    }
    
    #some_div {
        height:100%;
        background:black;
    }

Once I scroll the page, the blackness ends and the content flows onto the red background.  It doesn&#39;t seem to matter whether I set the positon to relative or absolute on the #some_div, the problem occurs either way. The content inside the #some_div is mostly absolutely positioned, and it is dynamically generated from a database so its height can&#39;t be known in advance.

Edit:  Here is a screenshot of the problem:
![div problem][1]


  [1]: http://i.stack.imgur.com/0EZlD.jpg

Div height 100% and expands to fit content

I want my body to stop scrolling when using the mousewheel while the Modal (from http://twitter.github.com/bootstrap) on my website is opened.

I&#39;ve tried to call the piece of javascript below when the modal is opened but without success

    $(window).scroll(function() { return false; });
    
AND
    
    $(window).live(&#39;scroll&#39;, function() { return false; });

Please note our website dropped support for IE6, IE7+ needs to be compatible though.

Prevent BODY from scrolling when a modal is opened

Is there a way I can echo the whole content of a .html file in PHP?

For example, I have some sample.html file, and I want to echo that filename, so its content should be displayed.





How can I echo the whole content of a .html file in PHP?

How can I view the contents of HTML5 local storage in IE? Chrome and FireFox provide a way through their developer tools to view the contents of local storage but I couldn&#39;t find that information using IE9 developer tool.

Viewing local storage contents on IE

I&#39;ve seen `div` tags use a `clearfix` class when it&#39;s child `divs` use the `float` property. The clearfix class looks like this:

    .clearfix:after {
        clear: both;
        content: &quot;.&quot;;
        display: block;
        height: 0;
        visibility: hidden;
    }
    .clearfix {
        display: inline-block;
    }
    .clearfix {
        display: block;
    }

I found that if I don&#39;t use `clearfix` when I use the `bottom-border` property, the border would show above the child `divs`. Can someone explain what the clearfix class does? Also, why are there two `display` properties? That seems very strange to me. I am especially curious about what the `content:&#39;.&#39;` means.

Thanks,G

What does the clearfix class do in css?

Which is a better way to check for the existence of an attribute?

[Jarret Hardie](https://stackoverflow.com/a/610893/647362) provided this answer:

    if hasattr(a, &#39;property&#39;):
        a.property

I see that it can also be done this way:

    if &#39;property&#39; in a.__dict__:
        a.property

Is one approach typically used more than others?

Which is the best way to check for the existence of an attribute?

I want to know the correct syntax for defining an element containing both attributes and child elements (if possible). For example:

    &lt;component type=&quot;A&quot; binding=&quot;B&quot;&gt;
      &lt;operation name=&quot;X&quot;&gt;
        &lt;input type=&quot;C&quot; /&gt;
      &lt;/operation&gt;

      &lt;event name=&quot;Y&quot;&gt;
        &lt;output type=&quot;D&quot; /&gt;
      &lt;/event&gt;
    &lt;/component&gt;

As you can see, both elements component, operation and event have both attributes and child element. Is it possible to define this in XSD? How?

Thank you very much!

XSD element with both attributes and child elements

[[dcl.attr.noreturn]](http://eel.is/c++draft/dcl.attr.noreturn) provides the following example:

    [[ noreturn ]] void f() {
        throw &quot;error&quot;;
        // OK
    }

but I do not understand what is the point of `[[noreturn]]`, because the return type of the function is already `void`.

So, what is the point of the `noreturn` attribute? How is it supposed to be used?

What is the point of noreturn?

Does anyone know how to resize the HTML5 video poster such that it fits the exact dimensions of the video itself?

here&#39;s a jsfiddle which shows the problem: http://jsfiddle.net/zPacg/7/

here&#39;s that code:

HTML:

    &lt;video controls width=&quot;100%&quot; height=&quot;100%&quot;  poster=&quot;http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png&quot;&gt;
      &lt;source src=&quot;http://demo.inwebson.com/html5-video/iceage4.mp4&quot; type=&quot;video/mp4&quot; /&gt;
      &lt;source src=&quot;http://demo.inwebson.com/html5-video/iceage4.ogg&quot; type=&quot;video/ogg&quot; /&gt;
      &lt;source src=&quot;http://demo.inwebson.com/html5-video/iceage4.webm&quot; type=&quot;video/webm&quot; /&gt;
    &lt;/video&gt;​

CSS:

    video{
    border:1px solid red;
    }​

Notice that the orange rectangle doesn&#39;t scale to the red border of the video.

Also, just adding the CSS below doesn&#39;t work either as it rescales the video along with the poster:

    video[poster]{
	height:100%;
	width:100%;
    }

Make HTML5 video poster be same size as video itself

Lets say I have class `C` which has attribute `a`.

What is the best way to get the sum of `a` from a list of `C` in Python?

---

I&#39;ve tried the following code, but I know that&#39;s not the right way to do it:
```
for c in c_list:
    total += c.a
```

Content Type	Original Author	Original Content on Stackoverflow
Question	James Kyle	View Question on Stackoverflow
Solution 1 - Css	Caio Cunha	View Answer on Stackoverflow
Solution 2 - Css	yckart	View Answer on Stackoverflow
Solution 3 - Css	Benny Neugebauer	View Answer on Stackoverflow

CSS values using HTML5 data attribute

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Why does substring slicing with index out of range work?

how to hide a vertical scroll bar when not needed

Attributions