I have a hex color, e.g. #F4F8FB (or rgb(244, 248, 251)) that I want converted into an as-transparent-as-possible rgba color (when displayed over white). Make sense? I'm looking for an algorithm, or at least idea of an algorithm for how to do so.

For Example:

rgb( 128, 128, 255 ) --> rgba(   0,   0, 255,  .5 )
rgb( 152, 177, 202 ) --> rgba(  50, 100, 150,  .5 ) // can be better(lower alpha)

Ideas?

---

FYI solution based on Guffa's answer:

function RGBtoRGBA(r, g, b){
    if((g==void 0) && (typeof r == 'string')){
        r = r.replace(/^\s*#|\s*$/g, '');
        if(r.length == 3){
            r = r.replace(/(.)/g, '$1$1');
        }
        g = parseInt(r.substr(2, 2), 16);
        b = parseInt(r.substr(4, 2), 16);
        r = parseInt(r.substr(0, 2), 16);
    }

    var min, a = ( 255 - (min = Math.min(r, g, b)) ) / 255;

    return {
        r    : r = 0|( r - min ) / a,
        g    : g = 0|( g - min ) / a,
        b    : b = 0|( b - min ) / a,
        a    : a = (0|1000*a)/1000,
        rgba : 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')'
    };
}

RGBtoRGBA(204, 153, 102) == RGBtoRGBA('#CC9966') == RGBtoRGBA('C96') == 
    {
       r    : 170,
       g    : 85 ,
       b    : 0  ,
       a    : 0.6,
       rgba : 'rgba(170, 85, 0, 0.6)' 
    }

Take the lowest color component, and convert that to an alpha value. Then scale the color components by subtracting the lowest, and dividing by the alpha value.

Example:

152 converts to an alpha value of (255 - 152) / 255 ~ 0.404

152 scales using (152 - 152) / 0.404 = 0
177 scales using (177 - 152) / 0.404 ~ 62
202 scales using (202 - 152) / 0.404 ~ 123

So, rgb(152, 177, 202) displays as rgba(0, 62, 123, .404).

I have verified in Photoshop that the colors actually match perfectly.

What are the most commonly used pixel sizes (primarily widths) and what are there advantages and disadvantages?

How can I best find a happy medium to give a good experience to people with a wide variety of monitor sizes?

An answer with an explanation rather than just the size would be greatly appreciated.

the most grids use a width of 960px. (When the design has a fixed width). When you take a look at global statistics 1024 range resolutions are still the most common: http://gs.statcounter.com/#resolution-ww-monthly-201006-201106

Do not use 1000 width. (You have to count in the border width of the browser and the scrollbar, in certain browsers / OS they are larger then in others)

I don't think there is a ultimate resolution that's why you should check the statistics on the concerned webpage (if the page already exists), to decide what resolution is most appropriate. If you can't do this you can check stats for you target market on http://gs.statcounter.com/

Or even better use responsive webdesign: http://www.alistapart.com/articles/responsive-web-design/

Since max- and min-width attributes in CSS, you can target whatever resolution you want, if you have the time / budget for it of course.

What is the best site to find the default CSS properties of HTML elements?

Many of the HTML elements come with some default CSS properties which can sometimes result in unknown/unwanted behaviour. For example Input boxes are displayed differently in different browsers. I'm looking for a place that covers the new CSS3 properties and the new HTML5 elements. I've seen in other (much older) questions (such as Browser's Default CSS) answers that suggest a solution of CSS reset. This solution is sometimes not wanted, often I would actually like to keep some of the basic properties (such as the highlighting of input boxes in Chrome). In other words: I don't want to get rid of things just because I don't know what they do.

So, Is there a site that can give me all this information (or perhaps most)?

It's different for each browser, so:

• Firefox: http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css. Or, browse to resource://gre-resources/ and look at html.css.
• Chrome: http://codesearch.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/html.css
• Internet Explorer, all versions: http://www.iecss.com/

As suggested by @robertc, you can also look at the HTML5 Boilerplate stylesheet, which "normalizes the display of a lot of stuff without being a reset in the traditional sense". It also fixes quite a few bugs/inconsistencies.

The question is simple; using jQuery's css function, the computed style of a CSS attribute may be returned, but what if there are more than one style for that attribute being rendered? For example :

<div id="foo" style="text-decoration:underline;">Some underline text</div>

The instruction $('#foo').css('text-decoration'); will return underline. Now if I change it to

<div id="foo" style="text-decoration:underline;">Some underline <span id="bar" style="text-decoration:line-through;">text</span></div>

The instruction $('#bar').css('text-decoration'); will return line-through, alright.

But the actual text is also underline! How can I return both? Do I need to search all ancestors if I want to know if some text is both underline and line-through? Sounds a bit painful, no?

** Edit **

Another problem arises whith this HTML

<span style="text-decoration:underline;">some <span id="e1" style="font-weight:bold;">text</span></span>

where $('#e1').css('text-decoration'); returns none for some reason, while the text is clearly rendered with an underline.

** Disclaimer **

This question is not to debate how the UA renders an element, but if an element hierarchy applies a CSS or not. If one wants to understand text-decoration better, I suggest one would read about it. The question tries to focus on a more generalize matter. For example, it can also apply to this HTML

<div style="display:none;">Some <span id="keyword" style="text-decoration:underline;">hidden</span> text</div>

where one could want to know if the element keyword is visible or not. With the code below, this is simply done with

cssLookup($('#keyword'), 'display', 'none');   // -> true

** UPDATE **

After all the answers and comments, here is, based on Brock Adams solution :

/**
 * Lookup the given node and node's parents for the given style value. Returns boolean
 *
 * @param e     element (jQuery object)
 * @param style the style name
 * @param value the value to look for
 * @return boolean
 */  
function cssLookup(e, style, value) {
    var result = (e.css(style) == value);
    if (!result) {
        e.parents().each(function() {
            if ($(this).css(style) == value) {
                result = true;
                return false;
            }
        });
    }

    return result;
}

Thank you, everyone, for your inputs.

I don't think any browser, or the W3C, provides a good way to do this.

A complicating factor is knowing which styles cancel preceding styles (underline versus no-underline, for example).

So, we would need multiple look-up tables or human judgement to know which style actually applied.

Finally, all these methods (3 answers so far) cannot distinguish between a blank, or missing, style setting and an explicitly set none. Obviously the browser can render an explicitly set none differently than a blank or missing setting.

For human use, this code should do the trick:

function cssTree (jNode, styleName, bShowBlanks) {
    var styleArray  = [jNode.css (styleName)];

    jNode.parents ().map ( function () {
        var style   = $(this).css (styleName);

        if (bShowBlanks  ||  ! /^(none|\s*)$/i.test (style) )
            styleArray.push (style);
    } );
    return styleArray;
}

alert ( cssTree ( $("#bar"), 'text-decoration') );

See it in action at jsFiddle.

Results:

bar: line-through,underline
el: none,underline

//-- With bShowBlanks = true.
bar: line-through,underline,none,none
el: none,underline,none,none

HTML5 has a new global attribute, hidden, which can be used to hide content.

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSS has the display:none rule, which can also be used to hide content.

article { display:none; }

Visually, they are identical. What is the difference semantically? Computationally?

What guidelines should I consider on when to use one or the other?

TIA.

EDIT: Based on @newtron's responses (below), I did more searching. The hidden attribute was hotly contested last year and (apparently) barely made it into the HTML5 spec. Some argued it was redundant and had no purpose. From what I can tell, the final evaluation is this: If I'm targeting only web browsers, there is no difference. (One page even asserted that web browsers used display:none to implement the hidden attribute.) But if I'm considering accessibility (e.g., perhaps I expect my content to be read by screen-readers), then there is a difference. The CSS rule display:none might hide my content from web browsers, but a corresponding aria rule (e.g., aria-hidden="false") might try to read it. Thus, I now agree that @newtron's answer is correct, though perhaps (arguably) not as clear as I might like. Thanks @newtron for your help.

The key difference seems to be that hidden elements are always hidden regardless of the presentation:

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

Since CSS can target different media/presentation types, display: none will be dependent on a given presentation. E.g. some elements might have display: none when viewed in a desktop browser, but not a mobile browser. Or, be hidden visually but still available to a screen-reader.

The Question

Which JavaScript framework (prototype, script.aculo.us, Mootools, MochiKit...) has decent CSS rule editing support?

This is about changing a style rule. I want to have a dynamic CSS classes which change. Example:

<style>
#answer, .reveal { display: none; color: blue; }
#answer { /* additional stuff */ }
</style>

Now, via JavaScript, I want to change the rule that has the “display: none” in it. – I’m convinced that sometimes this is the right way to go; I’m not looking for alternatives, when it is not the right way to do.

Which framework out there makes the following easy:

1. select a rule from all rules (e.g. “#answer, .reveal”)
2. what value does the selected rule(s) have for “display”?
3. delete the “display” property from the rule(s)

(2. and 3. are easy with DOM alone, as long as I get a handle to the CSS rule back from the framework)

The Frameworks which are not good enough:

YUI’s StyleSheet for example can only search for rules in one sheet at a time (limited, but enough for me), but it can’t show, edit or retrieve multi-selector rules like my first example (too limited for my taste).

YUI has also no way to get individual properties (the underlying DOM can, but you can’t get that structure through YUI). You could delete the “display” property alone, though, if you get hold of the rule by YUI means.

Dojo has some badly documented and incomplete stuff under dojox.html.styles

Ext JS has Ext.util.CSS. I checked the code and found a bug in getRule()... It is otherwise pretty sloppy with selector-matching (bad IE influence), which makes it bad for multi-selector rules. It also can’t delete properties through the API, but can give you the CSSRule so you can do it yourself. – The CSS tree walking is as primitive as it could be: no descending on media rules or imports.

PD:

$('.reveal').css(...whatever...) is not the answer, because it does not touch the CSS rules at all (it touches the CSS attributes of some element(s) instead)!

None, but please prove me wrong...

A decent implementation would have to discuss/document the following first:

• how it walks the CSS tree (including @imports and @media)
• how the walk can be configured (which @media and which sheets are considered)
• how cross domain access restrictions are handled/circumvented
• as CSS has no ids for the rules itself: only the selector can act as a decent rule identifiers
  • as IE8 and below split up multi-selectors, how smart is the framework to handle this?
  • IE9 is worse (see quirksmode.org)
• as multiple rules could be selected by one selector, how are they ordered?
• how can the rule in charge be found from a rule-set knowing the property we want to edit?

Until the frameworks catch up, consider:

• get the style/link node where the rule you look for is in
• use the (non-standard?) node.sheet (at least Chrome has it) to go to the CSSStyleSheet directly
• check quirksmode.org for quirks and f... IE
• loop over the rules to find your rule(s) via known selector
• DOM CSSStyleRule gives you all the power you need over any style rule

I'm looking to set the background-image (or even render an image via the pseudo elements :after or :before) to the value, which will be a URL, of a rel attribute, but only in certain cases (this is a cloud file listing). For example:

HTML:

<div class="icon ${fileExtension}" rel="${fileURL}"></div>

It would be great if I could do something like this:

CSS:

.icon.png,
.icon.jpg,
.icon.jpeg,
.icon.bmp,
.icon.gif { background-image: attr(rel,url);  }

... but obviously that doesn't work as, if I'm not mistaken, the attr() CSS function only works inside pseudo element blocks.

I know there are ways of doing this using conditional JSP or even jQuery logic, but I'd like to figure out a neat way of doing it via CSS3, since I'm only concerned with modern browsers at the moment anyway.

Also, I don't want to explicitly set the background image to the URL or create an <img> element, because by default if the file is not a supported image, I'd rather display a predetermined set of icons.

I've decided to go the jQuery route, and used a combination of @ryanve and @stefanz answers. Thanks guys

$(document).ready(function() {
    $(".png,.jpg,.jpeg,.bmp,.gif,.tiff").each(function(n) {
        var bg = 'url(' + $(this).attr("rel") + ')';
        $(this).css('background-image', bg);
    });
});

I think this is relatively neat/concise and works well for my needs. Feel free to comment on efficiency, methodology, etc.

In Firefox 3 and later (and probably older versions), selecting content within an iframe always seems to use the grey selection background colour used for a document that doesn't currently have focus, even if the iframe does have focus. The only exception I have been able to find is when the content within the iframe is editable. This is not the case in other browsers. Here's an example illustrating this:

http://jsfiddle.net/97Vjz/

This unfortunately prevents styling the selection within an iframe using the ::-moz-selection CSS pseudo-element because it only applies to non-grey selections:

http://jsfiddle.net/YYXSY/1/

My question is: is it possible to prevent an iframe's selection being grey in Firefox without using contenteditable / designMode?

UPDATE

This only seems to happen on dynamically written iframes: using a separate file and the src attribute solves the problem. However, I do need it to work with dynamically written iframes.

I just tried to reproduce the problem with a "real" page as iframe content and then it works like you want: blue colored selection! (FF 5.0)

see: http://jsfiddle.net/97Vjz/8/

It seems only generated content has this problem, so you could make a page (php/asp(x)) that generates the content for you to circumvent the problem.

Another solution to use javascript generated content is to load it with src="javascript:'<html />'" (actually this is Tim's own solution from the comments below.)

A simple example script: http://jsfiddle.net/97Vjz/9/

 iframe.src='javascript:\'<html><body>' + content + '</body></html>\'';

Is a library out there that will allow me to write the following kind of code, which parses CSS and returns a queryable object model

string input = "p, span { font-family: arial; }";
var cssRules = new Parser().Parse(input);
var rule = cssRules.Find(new Selector("p")).First();

Assert.That(rule.Attribute("font-family").Value, Is.Equal.To("arial"));

I've taken a look at dotless http://www.dotlesscss.org/, downloaded their code and examined some of the relevant unit tests and fixtures. It looks promising but I can't quite work out how to use it to parse and query plain CSS.

The closest I know is CssParser from jsonfx.net:

http://css-parser.googlecode.com/svn/trunk/CssParser/

You can parse any css and browse through selectors afterwards using StyleSheet property of CssParser

I'm looking for a easy way to fit a child div into it's parent's width.

Most solutions I've seen here are not cross-browser compatible (eg. display: table-cell; isn't supported in IE before version 8).

The solution is to simply not declare width: 100%.

The default is width: auto, which for block-level elements (such as div), will take the "full space" available anyway (different to how width: 100% does it).

See: http://jsfiddle.net/U7PhY/2/

Just in case it's not already clear from my answer: just don't set a width on the child div.

I'm trying to create a pure css Venn diagram like this

Where the circle gets highlighted on mouse hover. But the problem is: using the border-radius property if I mouse over the corner of the circle (outside the circle) , it triggers hover as well.

for a demo see this jsfiddle link and hover over the red area

is there any CSS solution to avoid this or am I ganna have to calculate it using javascript?

EDIT: Thanks to all for the responses. I should have posted the browser information as well. I'm using Chrome 12 So far it seems this bug exists in chrome. I will update this page with any further findings.

I know it's possible to draw circles with border-radius:50%, but it really is a bit of a hack. And it doesn't work in IE8 or lower, without using even more hacks, like CSS3Pie.

So while I accept that you've produced a good-looking Venn diagram in your fiddle example, I don't think it's the best way to do this.

A much better solution would be to use a proper graphics library to draw the diagram using either Canvas or SVG.

For Canvas, you could try this library: http://www.canvasxpress.org/venn.html

For SVG, I would recommend Raphael, which will produce hover-able Venn diagrams in about four lines of code.

I know that neither Canvas nor SVG are supported by IE8, but then neither is border-radius, so I assume that isn't a criteria for you.

In any case, Raphael does actually work in all versions of IE, as it detects the browser and renders VML instead of SVG if it's running in IE. Canvas support can also be hacked into older IEs if you really need it.

The auto option that several CSS attributes give is really useful. However, there doesn't seem to be one for the display attribute. I would expect this to set the display attribute to the browser default depending on the tag; e.g., a <div> would reset to display: block;, but a <span> would reset to display: inline;.

1. Is there a display: auto equivalent I've missed?
2. If not, why not?
3. What's the most elegant workaround? (I'm working programmatically, specifically with jQuery.)

You should use:

$('element').css('display','');

That will set display to whatever is the default for element according to the current CSS cascade.

For example:

<span></span>

$('span').css('display','none');
$('span').css('display','');

will result in a span with display: inline.

But:

span { display: block }

<span></span>

$('span').css('display','none');
$('span').css('display','');

will result in a span with display: block.

This is not a problem: in fact, it's almost always the desired result.

I have an xml file like this:

<?xml version="1.0" encoding="UTF-8"?>
<todo>
    <list><item>first</item><item>second</item></list>
    <list><item>first</item><item>second</item></list>
</todo>

Now I want to view the file in a browser. I want to have the <list> element rendered like a <ul> html-element, the <item> elements like <li> html-elements. i know that I can use xslt to transform the xml into an html document. but: is there a way to directly assign the html semantics to the elements of my list, e.g. with css (something like list{display:ul}) or a dtd?

Yes, this is possible.

See W3C-Website Style Sheets with XML.

You can use CSS to declare for each XML element how the browser should display it. But you have to be more verbose than in HTML, because for plain XML there are no predefined styles.

In the XML header add a reference to your CSS file:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="todo.css"?>
<todo>
   <list><item>first</item><item>second</item></list>
   <list><item>first</item><item>second</item></list>
</todo>

Here is an example CSS file (todo.css):

todo {
  display: block;
}

list {
  display: block;
  padding-left: 5mm;
  margin-top: 1cm;
}

item {
  display: list-item;
  list-style-type: circle;
}

For each element you can define the display style (block, inline, none, list-item).

For display: list-item you can additionally use the styles

• list-style-image: url(bullet.gif) to decalare a bullet icon graphic
• list-style-image with values inside or outside
• list-style-type with values circle, disc, square, none

Well here we have two columns A and B. The thing is column A generally contains more content so its height is more (in this case 126px) and column B has less content so it remains shorter (here 94px). Now I want to make the height of B = A, considering that height of column A might change dynamically by AJAX but to keep pace with column A, height of column B must also change.
<div id="A">filer text</div> | <div id="B">filler text2</div> Now may be by using jQuery or some js we can get the height of element with id #A and set it to #B but the problem lies when the content changes dynamically.

$("#a").css("height", $("#b").css("height") );

Which then could be put in the callback function of, say:

$.ajax({
  ...
  success:function(msg){
    // could be optimized by storing off of the comparision
    if( $("#a").height() > $("#b").height() ){
      $("#b").css("height", $("#a").css("height") );
    }
  }
});

I have a div that is styled height:100%. I would like the height to be 100% of the browser window, plus an additional 32px at the bottom, which will be cut off (along with its content). Is this possible? I searched, but it seems most people try to avoid this, not create it. A pure CSS solution would be preferable, but I'll try javascript or jquery if it's the only way.

Thanks in advance!

Clarification: There will be content within the div that I am trying to crop off, about 32px worth. So adding padding or any kind of blank space isn't quite what I'm looking for. Thanks.

Inspired by @Steve's answer you can set a height implicitly with position: absolute and setting both top and bottom values. In this case:

HTML:

<div class="content"></div>

CSS:

html,body { height: 100%; }

.content {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: -32px;
}

Example: http://jsfiddle.net/blineberry/qpvum/

I'm trying to created a pure css tooltip. I have the test code here: http://jsfiddle.net/RBdn4/

The only problem with this is that in Chrome, the text is underlining on the tooltip despite having the text-decoration: none; line in the css.

Any suggestions on how to get this to stop? The link should underline, but the .tooltip text should not.

Chrome applies the link's text-decoration to the <div> because it is a child of the <a>.

Add a wrapper element around the <a> and make the tooltip <div> a sibling instead of a child of the <a>. Show the tooltip when the wrapper is :hovered.

Oh, and make that CSS make sense!

HTML

<span class="wrap">
    <a href="#">this is text</a>
    <div class="tooltip"> this is a tooltip</div>
</span>

CSS

.tooltip {
    color: #000000;
    display: none;
    left: 50px;
    padding: 10px;
    position: absolute;
    top: 40px;
    width: 250px;    
    text-decoration: none;
    z-index: 100;
}

span.wrap:hover .tooltip {
    display: block;
}

Demo: http://jsfiddle.net/mattball/u66GT/

I am building a dynamic dropdown navigation.

In the dropdown there are multiple floating divs, but between each 'row of items' I have to add a horizontal divider. I can't set a static width because the text-length of the items are dynamic and may not wrap.

So I am reading each container, reading all div items, I want to read the width of the items to add the divider but can't manage it.

$('.muTopNavDropdown').each(function(i, e) {
        var iWidth = 0;
        $(this).find('.mainSubNavRowItem').each(function(ii, ee) {
        if (iWidth > maxWidth)
        alert('divide!');

            alert($(ee).width() +'-'+ $(ee).offsetWidth +'-'+ $(ee).clientWidth);

            iWidth += $(ee).width();
        });

    });

How do I read a floating div with no width value and dynamic content inside width?

Your code works for me. Are your divs visible? If divs are set to display none jquery will not be able to return a width.

I need to be able to adjust a width of a class based on a width of a parent. Currently .myClass has a width assigned in CSS. Would something like this work:

.myClass {
    color: #000;
    width:100px;
}

$(".myClass").width($(".myClass").parent().width());

This will be applied to a <DIV> and the parent could be a <TD> or another <DIV>.

What you have should work but I would probably change it to this:

$(".myClass").css("width",$(".myClass").parent().css("width"));

You might be able to use this instead of the second $(".myClass"), but you'd have to test that.

Keep in mind that it's not changing the class itself. It's changing the width of any element that uses that class.

UPDATE:

If you are going to be doing any sort of calculations with the parent width then you should probably stick with your original method. I like css when you are applying styles "as is" but that is a personal preference. If you are doing any kind of modifications to the parent value then width is probably better.

From the width documentation:

The .width() method is recommended when an element's width needs to be used in a mathematical calculation.

i have a button on my login page that results stretched in all IE browser versions.

Plese look at my live site black "LOGIN" button here: www.urbanclaim.com

this is the code i use for this button: (view source code for the form structure)

<input style="margin-left:15px;"  type="submit" name="Submit" class="button" value="<?php echo JText::_('LOGIN') ?>" />

How can i solve this problem on ie?? thanks.

Your button would work fine in IE8/9, but you have this:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

which forces those browsers to emulate IE7, which is the only version that actually has a problem with your button.

To fix IE7 (and other versions of IE in IE7 mode..):

• On the label that is the parent of .art-button-wrapper, change margin-left: 300px to padding-left: 300px. Also add display: block. Make the same changes to the next label.

See in IE7: http://jsbin.com/akavef/3

<!--
<label style="margin-left:300px;font-weight: bold; ">
-->
<label style="padding-left:300px;font-weight: bold; display:block ">

I would like to has a scrollable div but scrollbar should be on the right side of browser as default (but not on the right side of div). I've seen that on facebook (ceter div - contentArea is scrolled by right side browser scrollbar).

The way Facebook does it is by having all the content that doesn't scroll have a position of fixed. This way the native browser scrollbar will appear to scroll the center area only, while it's actually the rest of the page that is fixed in position.

A very simple example of this:

http://jsfiddle.net/tcaVN/

Now imagine the above, but with all non-scrollable items setup like the #header.

EDIT

Here is a slightly more complex example, with three columns:

http://jsfiddle.net/tcaVN/1/