Issue
I mean in a practical sense. I know that setting empty string on style property will clear the property inline styles and setting 'initial' will actually add this property with the 'initial' value but from the practical point of view that would be the same?
Solution
As I understand it, using ""
removes the property from the element's style, making it unset. In contrast, initial
sets the property to its initial value. In the MDN article on initial
, it warns about using initial
on inherited properties. That does appear to be a place where ""
vs. "initial"
makes a difference (they suggest you might want inherit
, unset
, revert
, or revert-layer
instead). Here's their example from inherited properties, with code that sets the color
on the em
to ""
, "initial"
, and "unset"
:
test("em-blank", "");
test("em-initial", "initial");
test("em-unset", "unset");
function test(id, value) {
document.getElementById(id).style.color = value;
}
p {
color: green;
}
<p>Using <code>""</code>:</p>
<p>This paragraph has <em id="em-blank">emphasized text</em> in it.</p>
<p>Using <code>"initial"</code>:</p>
<p>This paragraph has <em id="em-initial">emphasized text</em> in it.</p>
<p>Using <code>"unset"</code>:</p>
<p>This paragraph has <em id="em-unset">emphasized text</em> in it.</p>
As you can see, using initial
the color of the em
is the initial color the text would have (black) before the style turns the p
and its contents green. In contrast, ""
and "unset"
allow the green color to be inherited.
In comments on the question, mandy8055 and Rory McCrossan suggest this may be browser-specific. FWIW, I tested the above on Chromium, Firefox, and Safari, so that's the three primary engines out there. I have no knowledge of the extent to which this is browser-specific. I've tried looking at the information for it referenced by the HTML spec, which points here and here, but I don't see anything specifically addressing a blank string for a style value. Certainly a test shows the property being removed entirely:
document.getElementById("target").style.color = "";
<div id="target" style="color: blue">Right-click, inspect, and look at the style attribute; it's empty on Chromium and Firefox at least</div>
Answered By - T.J. Crowder
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.