Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The reason these entities (elements, properties, attributes, etc.) are named different things is because they serve different purposes. Let's start from the top and go through your examples.</p> <h2>Display vs. Visibiliy</h2> <pre><code>display: none; visibility: hidden; </code></pre> <p>As you can see from <a href="http://www.w3.org/TR/CSS21/propidx.html" rel="nofollow">the CSS 2.1 specification</a>, the value <code>none</code> is used for many different properties to indicate that the property's visual aspect should not be shown. So if the property is <code>float</code>, <code>none</code> means the element isn't floating. For the property <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" rel="nofollow"><code>display</code></a>, <code>none</code> means it's not displaying.</p> <p>For <a href="http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" rel="nofollow"><code>visibility</code></a>, <code>hidden</code> is different, since it unlike <code>display</code>, doesn't affect element flow. The element's box will still be rendered, but it will be invisible. If you gave the value <code>none</code> to <code>visibility</code>, it would semantically mean the exact same thing as <code>display: none</code>, which it isn't.</p> <h2>Overflow</h2> <pre><code>overflow: hidden; overflow: none; </code></pre> <p>These mean different things. <code>hidden</code> says that the content that overflows the size of the element will be clipped, while <code>none</code> says that there is no overflow control; in effect turning overflow off. <code>none</code> is not a valid value for <a href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow" rel="nofollow"><code>overflow</code></a>, but in this case, <code>visible</code> has the same effect.</p> <h2>Src vs. href</h2> <pre><code>&lt;script src="file.js"&gt; &lt;link href="file.css"&gt; </code></pre> <p>The difference between <code>script</code> and <code>link</code> is that while a <code>script</code>'s main purpose is to embed (either inline, or through reference via the <code>src</code> attribute) a script inside the HTML document, the purpose of <code>link</code> is to refer to other URIs on the world wide web. The fact that you use <code>link</code> to refer to a CSS stylesheet is not very intuitive; a more intuitive solution might be:</p> <pre><code>&lt;style src="file.css" /&gt; </code></pre> <p>I don't have the details on why the HTML Working Group chose to use <code>link</code> and not <code>style</code>, but from a little bit of digging, it seems that the <code>link</code> element was already present in <a href="http://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt" rel="nofollow">HTML 1.0</a> and <a href="http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.2.4" rel="nofollow">HTML 2.0</a> and that <code>style</code> wasn't introduced until <a href="http://www.w3.org/MarkUp/html3/dochead.html" rel="nofollow">HTML 3.0</a>.</p> <p>As discussions around a style sheet language started as early as <a href="http://virtuelvis.com/archives/2005/01/css-history" rel="nofollow">in 1993</a> (the same year HTML 1.0 was completed) and HTML 3.0 wasn't done until 1995, it makes sense that they found a way to embed stylesheets before the <code>style</code> element was invented.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload