5

Hi, this is more a conceptual question. How did the W3C decide to use hidden vs. none? I'm asking because I'm an ESL person (English as a second language). If I'm using overflow: hidden, overflow: none could just as well be used. The same goes for display: none and visibility: hidden. Couldn't it just have been display: none and visibility: none, because what really make the difference is the properties display and visibility and not their value. This is more a request for an explanation. Similiar "weird" things happens for example:

<script src="file.js">

and

<link href="file.css">

Why are they different? I understand how all of this works technically, I'm just curious about how they decided the names of the attributes.

Thanks.

2
  • link and script both bring an external file to xhtml file but use different approaches href vs src..
    – ncubica
    Sep 8, 2011 at 22:14
  • We use src on replaced elements. script is a replaced element while link creates link between the referencing document and an external resource. Hence we use href for that.
    – apnerve
    Oct 26, 2011 at 12:15

1 Answer 1

12

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.

Display vs. Visibiliy

display: none;
visibility: hidden;

As you can see from the CSS 2.1 specification, the value none is used for many different properties to indicate that the property's visual aspect should not be shown. So if the property is float, none means the element isn't floating. For the property display, none means it's not displaying.

For visibility, hidden is different, since it unlike display, doesn't affect element flow. The element's box will still be rendered, but it will be invisible. If you gave the value none to visibility, it would semantically mean the exact same thing as display: none, which it isn't.

Overflow

overflow: hidden;
overflow: none;

These mean different things. hidden says that the content that overflows the size of the element will be clipped, while none says that there is no overflow control; in effect turning overflow off. none is not a valid value for overflow, but in this case, visible has the same effect.

Src vs. href

<script src="file.js">
<link href="file.css">

The difference between script and link is that while a script's main purpose is to embed (either inline, or through reference via the src attribute) a script inside the HTML document, the purpose of link is to refer to other URIs on the world wide web. The fact that you use link to refer to a CSS stylesheet is not very intuitive; a more intuitive solution might be:

<style src="file.css" />

I don't have the details on why the HTML Working Group chose to use link and not style, but from a little bit of digging, it seems that the link element was already present in HTML 1.0 and HTML 2.0 and that style wasn't introduced until HTML 3.0.

As discussions around a style sheet language started as early as in 1993 (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 style element was invented.

6
  • 1
    That's a better answer than mine xD GJGJ Sep 8, 2011 at 22:45
  • I beg to differ on the <style src="file.css" /> thing though. If implemented that way, the processing of the page would pause until the CSS file is downloaded.
    – apnerve
    Oct 25, 2011 at 11:24
  • 2
    @asbjornu <link href="file.css" /> implementation is different as per the specs. The file gets downloaded in parallel and the processing of the page(HTML) is not paused. When using href, we are telling the user-agent (browser in this case) that file.css is a file that is related to the html document. If we use src, it's like telling the user-agent to download the file, dump the content of the file inside the tag and then proceed. That is the reason, img, script and iframe make the page load slower.
    – apnerve
    Oct 25, 2011 at 14:21
  • 1
    @apnerve, Sure, but since <style src> doesn't exist, it is (or at least was) entirely possible to specify that downloading the src should not halt page rendering. It's also incorrect that all src's halt page rendering; img doesn't. First, a placeholder (with the size given in the <img> tag, if available) is rendered for every img, then the placeholder is replaced with every image file once they are downloaded. Oct 26, 2011 at 6:43
  • 1
    @asbjornu : Thanks for the clarification. After so much thought I feel you are right. <style src> is more intuitive. I mistook it for <link src>
    – apnerve
    Oct 26, 2011 at 12:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.