I have a custom HTML5 tag called <scroll-content>. This tag actually gets created and inserted for me by a framework in certain places inside of my HTML file. Now I would like to modify the CSS of this tag so inside my CSS file I went:
scroll-content{
overflow: hidden;
}
It did what it was supposed to, but is this the proper way of styling the custom tags?
I can't add a class to them because I do not create the tags, the framework does, so I can't access them in my code and I would like to avoid using Javascript to find these tags and adding classes that way.
I would prefer to know the standard/safest way of modifying custom tags.
You can apply CSS to custom elements just like you can to standard HTML elements.
There's nothing wrong with scroll-content { ... }, as written in your code.
A Little Background
The browser, at a basic level, has no clue what elements exist. It doesn't recognize anything... until it is exposed to the default style sheet (sample).
The default style sheet introduces the browser to HTML elements.
Custom elements can therefore be defined as elements that are not included in the default style sheet. (Elements that exist, but are unsupported by the browser, could share this definition.)
Custom elements could, however, be introduced to the browser in author styles.
Here's something important to consider:
If the browser doesn't recognize an element (i.e., it's not in the default style sheet), it will apply CSS initial values.
6.1.1 Specified
values
User agents must first assign a specified value to each property based
on the following mechanisms (in order of precedence):
If the cascade results in a value, use it.
Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent
element.
Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.
As outlined above, if an element is unrecognized (#1 & #2 don't apply), use the initial value from the property definition (#3 applies).
So in your case:
Your custom element is: <scroll-content>
Your CSS is: scroll-content { overflow: hidden; }
You say in your question that this code does what it's supposed to do. But unless the framework you mention provides additional styles for custom elements, it cannot work (demo).
Here's why:
Since <scroll-element> is not in the default style sheet it will use CSS initial values.
Well, the initial value of the display property is inline.
But the overflow property only works on block elements.
So there's no way this HTML/CSS combination could work – the overflow property would be ignored, as would height, width and any other properties that don't apply to inline elements.
A custom element would need to have display: block applied for overflow to work (demo).
Similarly, the only reason body, div, h1, p, ul exist as block elements is because they are defined this way in the default style sheet (sample).
So, putting aside the arguments for and against custom elements, here's the bottom line:
Add display: block to your custom elements and you're good-to-go.
Cannot exist standard tags with a hyphen "-" in his name, so there is not such problem.
It would be preferable if you can avoid using custom tags since you never know when those tags may become standardized or have a specific usage at some point.
I think it would be safer if you create a class to that custom tag, something like:
.scroll-content{
overflow: hidden;
}
This should do it.
Related
Is it possible to override the display property with its default value? For example if I have set it to none in one style, and I want to override it in a different with its default.
Or is the only way to find out what the default of that element is and then set it to that? Would like to not have to know if the element is usually block, inline or whichever...
A browser's default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4 — the working group simply hasn't settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revert can be found on caniuse.com.
While the level 3 spec does introduce an initial keyword, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of display is inline; this is specified here. The initial keyword refers to that value, not the browser default. The spec itself makes this note under the all property:
For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.
This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.
So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:
div.foo { display: inline-block; }
div.foo.bar { display: block; }
(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)
If using javascript is allowed, you can set the display property to an empty string. This will cause it to use the default for that particular element.
var element = document.querySelector('span.selector');
// Set display to empty string to use default for that element
element.style.display = '';
Here is a link to a jsbin.
This is nice because you don't have to worry about the different types of display to revert to (block, inline, inline-block, table-cell, etc).
But, it requires javascript, so if you are looking for a css-only solution, then this is not the solution for you.
Note: This overrides inline styles, but not styles set in css
Unset display:
You can use the value unset which works in both Firefox and Chrome.
display: unset;
.foo { display: none; }
.foo.bar { display: unset; }
No, it is generally not possible. Once some CSS (or HTML) code sets a value for a property on an element, there is no way to undo it and tell the browser to use its default value.
It is of course possible to set a property a value that you expect to be the default value. This may work rather widely if you check the Rendering section of HTML5 CR, mostly reflecting what browsers actually do.
Still, the answer is “No”, because browsers may have whatever default values they like. You should analyze what was the reason for wanting to reset to defaults; the original problem may still be solvable.
What worked for me was revert!
revert resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet.
If you have access to JavaScript, you can create an element and read its computed style.
function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
var pseudoElement = opt_pseudoElement || null;
var element = document.createElement(elementTagName);
document.body.appendChild(element);
var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
element.remove();
return computedStyle;
}
// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'
Concerning the answer by BoltClock and John, I personally had issues with the initial keyword when using IE11. It works fine in Chrome, but in IE it seems to have no effect.
According to this answer IE does not support the initial keyword:
Div display:initial not working as intended in ie10 and chrome 29
I tried setting it blank instead as suggested here:
how to revert back to normal after display:none for table row
This worked and was good enough for my scenario. Of course to set the real initial value the above answer is the only good one I could find.
According to my understanding to your question, as an example: you had a style at the beginning in style sheet (ex. background-color: red), then using java script you changed it to another style (ex. background-color: green), now you want to reset the style to its original value in style sheet (background-color: red) without mentioning or even knowing its value (ex. element.style.backgroundColor = 'red')...!
If I'm correct, I have a good solution for you which is using another class name for the element:
steps:
set the default styles in style sheet as usual according to your desire.
define a new class name in style sheet and add the new style you want.
when you want to trigger between styles, add the new class name to the element or remove it.
if you want to edit or set a new style, get the element by the new class name and edit the style as desired.
I hope this helps. Regards!
This will probably be an extremely easy question to answer, but I am trying to create a one-stop-shop for setting up property values from SQL and would like to know an answer to the issue that just came up in brainstorming:
If you set a parent (let's say a form) to be Read-Only but set an object (lets say a button) in that parent to NOT be Read-Only, will the button be read-only? Also, what If the parent or child had !Important included?
I am trying to set up a priority system so users can set up these kind of property values without running into issues where unexpected things do not happen.
readonly is not a css property, thus no style. It goes directly into the html tag.
The key buzzwords for you to search are css inheritance and css specifity.
For a quick overview: Yes, there are fixed rules. Not every property is inherited. You can look them up e.g. in the MDN CSS Reference.
Which css rule kicks in depends on where you place the style rules and how specific your selector is.
Cascading order (source):
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
Specifity is like a score system. The rule with the highest score (=highest specifity) applies.
ID, e.g. #paragraph {...} (100 points)
Class, e.g. .redparagraphs {...} (10 points)
Tag, e.g. p {...} (1 point)
So the rule div p span {...} would have a score of 3 points, because of three tag selectors.
#wrapper .centered #main .fancynews .withoutborder p {...} would have 231 points and so on.
If two rules have the same score (specifity), then the last one processed counts (stylesheets are processed from top to bottom).
The "quick and dirty" trick for applying a style is to add an !important to the rule like
.alwaysredtext { color:#F00 !important; }
This will override whatever color rule you made and whereever (as long as they do not also have an !important). This is not recommended due to later maintainability problems.
p.s.: Don't miss the Specifity Calculator where you can enter and compare several selector rules and see which one "wins".
Only <input> and <textarea> elements support the readonly attribute, so not, what you are describing is not possible.
Is it possible to override the display property with its default value? For example if I have set it to none in one style, and I want to override it in a different with its default.
Or is the only way to find out what the default of that element is and then set it to that? Would like to not have to know if the element is usually block, inline or whichever...
A browser's default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4 — the working group simply hasn't settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revert can be found on caniuse.com.
While the level 3 spec does introduce an initial keyword, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of display is inline; this is specified here. The initial keyword refers to that value, not the browser default. The spec itself makes this note under the all property:
For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.
This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.
So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:
div.foo { display: inline-block; }
div.foo.bar { display: block; }
(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)
If using javascript is allowed, you can set the display property to an empty string. This will cause it to use the default for that particular element.
var element = document.querySelector('span.selector');
// Set display to empty string to use default for that element
element.style.display = '';
Here is a link to a jsbin.
This is nice because you don't have to worry about the different types of display to revert to (block, inline, inline-block, table-cell, etc).
But, it requires javascript, so if you are looking for a css-only solution, then this is not the solution for you.
Note: This overrides inline styles, but not styles set in css
Unset display:
You can use the value unset which works in both Firefox and Chrome.
display: unset;
.foo { display: none; }
.foo.bar { display: unset; }
No, it is generally not possible. Once some CSS (or HTML) code sets a value for a property on an element, there is no way to undo it and tell the browser to use its default value.
It is of course possible to set a property a value that you expect to be the default value. This may work rather widely if you check the Rendering section of HTML5 CR, mostly reflecting what browsers actually do.
Still, the answer is “No”, because browsers may have whatever default values they like. You should analyze what was the reason for wanting to reset to defaults; the original problem may still be solvable.
What worked for me was revert!
revert resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet.
If you have access to JavaScript, you can create an element and read its computed style.
function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
var pseudoElement = opt_pseudoElement || null;
var element = document.createElement(elementTagName);
document.body.appendChild(element);
var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
element.remove();
return computedStyle;
}
// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'
Concerning the answer by BoltClock and John, I personally had issues with the initial keyword when using IE11. It works fine in Chrome, but in IE it seems to have no effect.
According to this answer IE does not support the initial keyword:
Div display:initial not working as intended in ie10 and chrome 29
I tried setting it blank instead as suggested here:
how to revert back to normal after display:none for table row
This worked and was good enough for my scenario. Of course to set the real initial value the above answer is the only good one I could find.
According to my understanding to your question, as an example: you had a style at the beginning in style sheet (ex. background-color: red), then using java script you changed it to another style (ex. background-color: green), now you want to reset the style to its original value in style sheet (background-color: red) without mentioning or even knowing its value (ex. element.style.backgroundColor = 'red')...!
If I'm correct, I have a good solution for you which is using another class name for the element:
steps:
set the default styles in style sheet as usual according to your desire.
define a new class name in style sheet and add the new style you want.
when you want to trigger between styles, add the new class name to the element or remove it.
if you want to edit or set a new style, get the element by the new class name and edit the style as desired.
I hope this helps. Regards!
I don't want to argue regarding the use of inline styles over external styles however I just want to know your ideas on certain situations wherein inline styling could be used.
For example I have 10 types of tables that have different width but always use the same border color, thickness and padding. What I currently think is I should declare a global CSS class that controls the border and the padding of the table and then use inline styling to specify the width of the table.
E.g
<table class="default" style="width: 320px;">
Is my approach applicable?
yes u can declare a global CSS class and use this in all table. it will work for all table.
I believe its a correct approach in your case. As you are making the correct use of external class "default", by using it in all the tables and specifying the different widths inline with the specific elements.
I think you're misunderstanding something here. If you take this:
<table class = "default" style = "width: 320px;">
Then this does not apply width: 320px; on all tables with class default. It only applies it on this specific element which has the style attribute.
If you're looking to specify such CSS without having to <link> external files, you can embed your CSS within <style> tags:
.default { //or table, or whatever your selector is
width: 320px;
}
If you want to style a particular table with the class default with a different width, give it another class (class = "default width320") and do:
.default.width320 { //selects element with BOTH default and width320 classes
width: 320px;
}
Read more about CSS selectors here, and selector specificity here.
Edit: if you only want to style that particular table, your approach is relatively-fine. But, I suggest using classes and merging your styles in one place (whether it's a .css file or an inline <style> definition) — it's much more maintainable and tidier than scattered style attribute definitions.
Edit 2: it's absolutely correct to use style attributes. It's more of a matter of personal choice. If you're sure that this won't cause maintainability issues ('Hey, why is my table 320 pixels wide? I don't see anything in my CSS file that does that'), then go for it. It's what the style attribute is for.
This is only a problem because, most of the time, if you've done it once then you're going to want to do it again. And now you have two identical style properties. And, well, they should both be red-bordered. Oh, and I need a third one of these tables somewhere. And, wait, they should be a little skinnier...
On the other hand, if you used a one-off class, you can just slap it on the next table. Or you can compare all ten tables and tweak them from one place, etc.
The problem with violating principles is that principles are often hard-earned. :)
Is it possible to override the display property with its default value? For example if I have set it to none in one style, and I want to override it in a different with its default.
Or is the only way to find out what the default of that element is and then set it to that? Would like to not have to know if the element is usually block, inline or whichever...
A browser's default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4 — the working group simply hasn't settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revert can be found on caniuse.com.
While the level 3 spec does introduce an initial keyword, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of display is inline; this is specified here. The initial keyword refers to that value, not the browser default. The spec itself makes this note under the all property:
For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.
This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.
So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:
div.foo { display: inline-block; }
div.foo.bar { display: block; }
(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)
If using javascript is allowed, you can set the display property to an empty string. This will cause it to use the default for that particular element.
var element = document.querySelector('span.selector');
// Set display to empty string to use default for that element
element.style.display = '';
Here is a link to a jsbin.
This is nice because you don't have to worry about the different types of display to revert to (block, inline, inline-block, table-cell, etc).
But, it requires javascript, so if you are looking for a css-only solution, then this is not the solution for you.
Note: This overrides inline styles, but not styles set in css
Unset display:
You can use the value unset which works in both Firefox and Chrome.
display: unset;
.foo { display: none; }
.foo.bar { display: unset; }
No, it is generally not possible. Once some CSS (or HTML) code sets a value for a property on an element, there is no way to undo it and tell the browser to use its default value.
It is of course possible to set a property a value that you expect to be the default value. This may work rather widely if you check the Rendering section of HTML5 CR, mostly reflecting what browsers actually do.
Still, the answer is “No”, because browsers may have whatever default values they like. You should analyze what was the reason for wanting to reset to defaults; the original problem may still be solvable.
What worked for me was revert!
revert resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet.
If you have access to JavaScript, you can create an element and read its computed style.
function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
var pseudoElement = opt_pseudoElement || null;
var element = document.createElement(elementTagName);
document.body.appendChild(element);
var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
element.remove();
return computedStyle;
}
// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'
Concerning the answer by BoltClock and John, I personally had issues with the initial keyword when using IE11. It works fine in Chrome, but in IE it seems to have no effect.
According to this answer IE does not support the initial keyword:
Div display:initial not working as intended in ie10 and chrome 29
I tried setting it blank instead as suggested here:
how to revert back to normal after display:none for table row
This worked and was good enough for my scenario. Of course to set the real initial value the above answer is the only good one I could find.
According to my understanding to your question, as an example: you had a style at the beginning in style sheet (ex. background-color: red), then using java script you changed it to another style (ex. background-color: green), now you want to reset the style to its original value in style sheet (background-color: red) without mentioning or even knowing its value (ex. element.style.backgroundColor = 'red')...!
If I'm correct, I have a good solution for you which is using another class name for the element:
steps:
set the default styles in style sheet as usual according to your desire.
define a new class name in style sheet and add the new style you want.
when you want to trigger between styles, add the new class name to the element or remove it.
if you want to edit or set a new style, get the element by the new class name and edit the style as desired.
I hope this helps. Regards!