Why were window.scrollY and window.scrollX introduced?

As far as I know, pageXOffset/pageYOffset properties were already available since Netscape 4 era.
And it seems scrollX/scrollY were introduced circa Netscape 6.

Alternative question:

Q2. Is there a browser which implements scrollX/scrollY but doesn't support pageXOffset/pageYOffset?

I will add a third question because no one was able to answer the previous ones:

Q3. scrollX/scrollY was added to the latest editor's draft of the CCSOM and the working draft only got pageXOffset/pageYOffset, why we are they keeping both attributes?

How does FOUC (flash of unstyled content) occur

I read articles about the processing of HTML (DOM, CSSOM, rend-tree, layout, paint). From here render-blocking-css, I know the css file block the js running, but my question is that if css file is blocking resource, and browser need to generate rend-tree with DOM and CSSOM, so how does it show FOUC when CSS file doesn't be loaded (it seems that css resource not a blocking resource), browser can display the FOUC while dowloading the css, css not block its rendering.

Why does scrollWidth only include the left padding?

So, I have a DIV #Wrapper which has a fixed width. Inside that DIV, I have another DIV #Panel which also has a fixed width:

<div id="Wrapper">
    <p>...</p>
    <div id="Panel">Panel</div>
    <p>...</p>
</div>  

Sometimes, the width of the Panel is larger than the with of the Wrapper, and in those cases I would like to widen the Wrapper via JavaScript, so that it wraps the Panel perfectly.

Live demo: http://jsfiddle.net/H6rML/

I intended to use .scrollWidth on the Wrapper to determine the width of the Panel. However, the problem is that the Wrapper has horizontal padding, and the .scrollWidth for some reason only includes the left-padding of the wrapper. So:

Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width

So, given:

#Wrapper {
    width: 200px;
    padding: 10px;        
}

#Panel {
    width: 300px;
}

Wrapper.scrollWidth returns 310px, which is not very useful. If .scrollWidth didn't include any padding and only returned the width of the Panel, I could work with that (I would add the padding manually to that value). If both paddings were included, I could work with that too. But why is only the left padding included? (Btw this behavior appears to be cross-browser.)

A few additional notes:

1. I cannot set the width on the Wrapper directly. In my actual code, I set the width on an ancestor element that is several levels above the Wrapper, and I use a custom API to set the width. This is why I need to retrieve the full 320px value.

2. I would like a solution that does not depend on the content of the Wrapper. In my demo it's a Panel, but in other scenarios there could be a different element that overflows, or even multiple elements. That is why I went with .scrollWidth on the Wrapper.

Is there a way to get the value 320px without having to manually add the right padding to the .scrollWidth value?

Btw, according to the standard, the right padding should be included:

The scrollWidth attribute must return the result of running these steps:

1. If the element does not have any associated CSS layout box return zero and terminate these steps.

2. If the element is the root element and the Document is not in quirks mode return max(document content width, value of innerWidth).

3. If the element is the HTML body element and the Document is in quirks mode return max(document content width, value of innerWidth).

4. Return the computed value of the 'padding-left' property, plus the computed value of the 'padding-right', plus the content width of the element.

Source: http://www.w3.org/TR/cssom-view/

Why don't the browsers behave accordingly?

To further improve the clarity of my post, let me sum up the two main questions:

(1) If the standard states that the right padding should be included in the .scrollWidth value, then why don't the browsers behave accordingly?

(2) Is it possible to retrieve the correct value (320px in my case), without having to manually add the right padding?

This question has been answered in another thread

The answer to this question is located here: When a child element overflows horizontally, why is the right padding of the parent ignored?

​

Is the 'getPropertyValue' method required for retrieving CSS?

Could you tell me why we need to use the getPropertyValue method if we can use only the getComputedStyle one?

For example, this will work, as far as I understand:

var s = getComputedStyle(element, null).opacity;

Which is equivalent to the following:

var s = getComputedStyle(element, null).getPropertyValue('opacity');

Can we use getComputedStyle without getPropertyValue?

Getting stylesheet object from ownerNode(style tag)

I have a multiple style tags in my webpage, and i want to manipulate the cssRules in them. How can I get the styleSheet as in document.styleSheets object from a style element. A way could be scanning all the styleSheets in document.styleSheets and match its ownerNode with my style element object. Is there any better way that this?

Why doesn't getComputedStyle take into account margin collapsing?

Concerning in-browser Javascript, the window.getComputedStyle() method is supposed to give the final used values of the CSS properties applied to an element. According to the MDN documentation, that means “after all calculations have been performed”.

However, it seems that “all calculations” does not include margin collapsing. In Firefox and Chrome (at least), the instruction getComptedStyle().marginBottom returns the computed value before any margin collapsing has been calculated.

For instance, consider the following element:

<div style="margin: 10px 0 15px 0"></div>

Its top and bottom margins will be collapsed because (roughly) its content height is zero (cf. the W3C CSS2 Recommendation). The CSSOM methods will return these values:

getComputedStyle().marginTop → 10px
getComputedStyle().marginBottom → 15px
getBoundingClientRect().top → {top of margin box} + marginTop
getBoundingClientRect().bottom → idem top

But, due to margin collapsing, the layout shows a margin of 10px before the bounding client rectangle, and a margin of 5px after, i.e. max(0, marginBottom - marginTop).

Why doesn't getComputedStyle().marginBottom return directly 5px, the real used value “after all calculations have been performed”, instead of the specified 15px? Is this a W3C-recommended behavior? (I haven't seen anything about this in the w3.org docs.)

Is this a bug or a feature?

How can I get the value of a CSS property that the browser does not support?

So I'm looking to get the value of a CSS property that the browser doesn't support. This is something I'd like to use to create a polyfill, but I need to know the value of the property at any given time.

Here's a test file with all the methods I've tried so far. Bascially, given the following:

#element {
    transform: rotate(2deg);
}

I'd like to be able to, via JavaScript, get the value rotate(2deg) regardless of whether or not the browser supports it. Is this possible? And if so, is there a preformant way to do it (I will need to do this a lot in older browsers)?

Some preferences if it is possible:

• Would prefer to do this from an element, instead of looping through a stylesheet's rules
• Need to support IE 7 at least (or have methods to do so)
• Shouldn't take 2 seconds to calculate. I'd like something that will preform decently

rule.style is undefined when processing document.styleSheets

Please bare in mind that I am still learning JavaScript so be kind please.

I have the following code which searches a webpage for any CSS containing HTTP urls. However, there is one variable "v" which can sometimes be undefined. Error "rule.style is undefined"

How can I resolve this undefined response? I have tried to use conditions but with no luck.

var seachHttp = function () {
    var cssSheets = document.styleSheets, // Loaded CSS Sheets
        i =0, il = cssSheets.length, // Counter and limit for sheets
        j, jl, rules, rule, // Counter and vars for Rules inside a Sheet
        stylesToSearch = [ // Properties to Seach HTTP ON
            'background',
            'background-image',
        ],
        k, kl=stylesToSearch.length, // Counter for properties
        s, // Current Property
        v;  // Current Value
    for(;i<il;i++) { // Loop Sheets
        rules = cssSheets[i].rules || cssSheets[i].cssRules;
        for(j=0,jl=rules.length;j<jl;j++) { // Loop Rules
            rule = rules[j];
            for(k=0;k<kl;k++){ // Loop Styles
                s = stylesToSearch[k]; 
                v = rule.style[s]; // Get Value from Current Style
                if ( typeof v !== undefined && v.toString().toLowerCase().indexOf("http") > -1 ) { // Seach for HTTP Content
                    alert("Found HTTP at " + rule.selectorText + " " + s + " = " + rule.style[s]);
                    return true;

                }
            }
        }
    }
    return false;
}

I call this function using:

var cssresult = seachHttp();
if (cssresult == true && cssresult !== undefined) {
//code here
}

Why does ::first-letter affect ::before content instead of ::parent element? [duplicate]

I've noticed that on a paragraph I have, when using the ::first-letter pseudo-selector, it affects ::before instead of the parent element, which is the one being selected.

Is there any way around this, preferably without using extra HTML? (And if this is part of the spec, what's their logic behind it?)

Here is the code so you can reproduce the effect. I used Chrome on Windows 8.

p:nth-of-type(1) {
  font-family: 'Georgia';
  font-size: 1.5rem;
  font-style: italic;
  text-align: center;
  &::first-letter {
    text-transform: lowercase;
  }
  &::before {
    content: 'This is ';
  }
}

Here is a demo: http://codepen.io/boltaway/pen/jPYmBq

What does this empty string mean?

<script type="text/javascript">

        var step = 4;

        function expandPanel()

        {

            var panel = document.getElementById('panel');

            if ( panel.clientHeight < (panel.originalHeight-step))

            {

                //clientWidth

                var h = panel.clientHeight + step;

                panel.style.height = h+"px";

                setTimeout("expandPanel()", 100); 

            }

            else

            {

                panel.style.height = "";

                var panelTitle = document.getElementById('panelTitle');

                panelTitle.firstChild.nodeValue = 'Collapse';



            }

        }



        function collapsePanel()

        {

            var panel = document.getElementById('panel');



            if ( panel.clientHeight >= step)

            {

                var h = panel.clientHeight - step;

                panel.style.height = h+"px";

                setTimeout("collapsePanel()", 100);

            }

            else

            {

                panel.style.display = 'none';

                var panelTitle = document.getElementById('panelTitle');

                panelTitle.firstChild.nodeValue = 'Expand';

            }





        }



        function changePanel()

        {

            var panel = document.getElementById('panel');

            if (!panel.style.height || 

                (panel.style.display == 'none'))

            {

                if (panel.style.display == 'none')

                {

                    panel.style.display = '';

                    expandPanel();

                }

                else

                {

                    panel.originalHeight = panel.clientHeight;

                    collapsePanel();

                }

            }

        }

    </script>

There is an empty string assigned to the height and display CSS properties (via CSSOM). What does it mean in this case?

Assign property reference in javascript

I am working on a small javascript script to edit CSS code and I found out there are many ... particularities, if I may say so, with internet explorer in comparison to other browsers. For instance the rules object of the document.stylesheet object is called cssRule for most browsers and rule for IE.

What I would like to do here is assign the reference of a property of an object containing the size of the window (window.innerWidth & document.body.clientWidth) in order to avoid checking each time if IE object names should be used or the "normal" one.

Is it a good/bad idea?

Before posting the question I thought some more about it and came up with a solution..

function CommonObject(obj, propertyName){
    this.get = function() { return obj[propertyName]; }
}

Is there another/better way to do this?

Thanks

(Yeah I know doing this is really not necessary, especially since I'm making a small script and performance isn't really a concern but I'm mostly being curious.)

After downloading the CSS, does CSS parsing and DOM parsing go side by side [duplicate]

What i know when browser sees a script tag in while parsing html it stops its execution and get the script executes it and then again starts parsing the dom.

Does the same thing happen for CSS as well? or can CSSOM parsing and dom parsing goes side by side.

UPDATE

I think my question wasn't clear, i was not asking about the order of css loading i know CSS files are added in the order they are included. My question was once they gets downloaded, the browser does a CSS parsing and while doing so does the browser stops the dom parsing, as we have the case with script loading. I hope my question is clear now.