<pseudo> </pseudo> ?
The pseudo-elements of CSS are not in the DOM. But internally they must be equivalent to some kind of generic HTML element, since they can be styled, can be visible, and they affect the page flow.
What is the element type of a pseudo element?
And can we programmatically create them, without using CSS?
Pseudo-elements have no element type as far as the document language is concerned because, as you state, they don't exist in the DOM, and as can be inferred from the "pseudo-" prefix, they're not "real" elements. CSS just calls them pseudo-elements, however you have different pseudo-elements for different purposes or different parts of element structures, such as the self-explanatory ::first-letter and ::first-line, and ::before and ::after for generating content before and after an element's actual content.
That pseudo-elements affect the page flow has nothing to do with the DOM. A browser uses CSS to lay out and format DOM elements into objects that can be rendered to the screen, and in the process of doing so creates pseudo-elements as descendants of boxes that are made for real elements. Although you typically attach a pseudo-element to an element, you're not altering the DOM in any way; instead, you're simply altering how the browser lays out a page.
Because pseudo-elements are a concept unique to CSS (defined in the Selectors module), you cannot create them using anything other than CSS. The implementation of pseudo-elements as a CSS concept is defined in CSSOM instead, which is the CSS equivalent of the DOM (and where methods like window.getComputedStyle() are defined). However I'm not very familiar with the CSSOM, so I can't comment further than that they're implemented very similarly to real elements in terms of CSS.
Related
Today I have learnt this rule, so I would like to know the reason behind it.
Why would it matter if the text is inside block or inline element?
The CSS transformations spec says transforms only work on block-level or atomic inline-level elements (e.g. inline-block). But why don't they work on inline elements? What is the reasoning behind this limitation?
This test by Microsoft shows it's possible. It passes in IE9, but not in Chrome. So it's possible, just not by the spec.
As #Shikkediel mentioned, inline elements do not have strong boundary like block elements do. They don't influence the flow of the document in the same way, if at all, and are tightly bound to their neighboring text or elements. CSS transforms operate on the bounding box (which inline elements do technically have) in a way that wouldn't really make sense for inline elements.
Consider a <strong> within a <span> (or div). The bold text is defined only by the change in style, but can flow across multiple lines and does not have a predictable rectangular bounding area. If you were to apply a CSS rotation, where would it rotate from? How would it reflow, if at all, while rotating?
On the other hand, the containing <span> does have rectangular bounds, so finding the center and corners, rotating and scaling, are all predictable and well-defined.
As an example, take this fiddle. The background of the inline element is:
but the bounds shown by the editor are:
You can clearly see that the background and the element's bounds do not match at all. Without clear bounds, transforms because difficult and not very useful.
Is there an opposite of :inherit in CSS? (If you are not familiar with :inherit: inherit)
E.g. to get an element to take over the width of its child, instead of its parent (the latter would be done using :inherit?
No, CSS was designed so that inheritance works only so that an element may inherit from its parent.
The width of an element may depend on the widths of its children, but that’s an entirely different issue. In some contexts, an element takes the minimum width needed to accommodate its children. But that’s because it has been defined so; there is no magic word to use to achieve it in a manner comparable to the effect of the keyword inherit.
iframe = Inline?
While debugging some layout problem today I was surprised to see that <iframe> elements have a default display property of inline.
For me this seems strange, especially considering that you can apply a height and width to an <iframe> that is respected by the browser, which should not be the case for a simple inline-element.
So can anyone explain me the reasoning behind this?
Demo
HTML
<iframe id="test"></iframe>
CSS
alert($('#test').css('display'))
https://jsfiddle.net/0tdLr9pq/
Thanks!
Because the HTML4 spec said so:
The IFRAME element allows authors to insert a frame within a
block of text. Inserting an inline frame within a section of text is
much like inserting an object via the OBJECT element: they both
allow you to insert an HTML document in the middle of another, they
may both be aligned with surrounding text, etc.
The "be aligned with surrounding text" part means they shouldn't be block-level by default.
And it's true that, usually, inline elements ignore the height and width properties:
10.3.1 Inline, non-replaced elements
The width property does not apply.
10.6.1 Inline, non-replaced elements
The height property does not apply.
But that's not true for replaced elements, like iframe. This is explained in 10.3.2 and 10.6.2 sections.
IFRAME stand for Inline Frame. See this : http://www.w3.org/TR/html401/present/frames.html#h-16.5
Something that I was wondering while styling my latest HTML5/CSS3 baby: Do some elements inherit their sibling's parameter's values if we won't specirfy the parameters and values for these elements? Basically I had a situation in which 3/4 of the website's home page elements have been styled already in stylesheet and what was left was the footer section.
Last element that I've styled was a boxcontent with two columns. The columns have been styled with a float:left parameter and value. Upon that when I've reloaded the page, the footer section which is not styled like I've mentioned before, have moved up and to the extreme right from column2 of boxcontent section.
I'm wondering why the footer section has inherited some of the sibling's section's parameters and values if the footer is not even inheriting this data straight from it's parent element - that is body.
Children inherit parent's values, but siblings do not inherit each other's parameters. Your layout was changed, because you've used floating, which can affect positioning of elements that are below the floated blocks. When using floating for positioning it is a good idea to clear floats.
Elements don't inherit siblings styles, but do inherit their parent's styling. I've ran into layout issues that I've traced up many levels on a parent. Chrome's developer tools are a great way to inspect where styling is coming from for any selected element.