发表新帖
发表新帖

Why does CSS work with fake elements?

前端 未结
关注
19 728
野的像风
野的像风 2020-11-28 01:21

In my class, I was playing around and found out that CSS works with made-up elements.

Example:

相关标签:
19条回答
  • 醉酒成梦
    2020-11-28 01:34

    Others have made excellent points but its worth noting that if you look at a framework such as AngularJS, there is a very valid case for custom elements and attributes. These convey not only better semantic meaning to the xml, but they also can provide behavior, look and feel for the web page.

    0 讨论(0)
  • 一向
    2020-11-28 01:35

    YADA (yet another (different) answer)

    Edit: Please see the comment from BoltClock below regarding type vs tag vs element. I usually don't worry about semantics but his comment is very appropriate and informative.

    Although there are already a bunch of good replies, you indicated that your professor prompted you to post this question so it appears you are (formally) in school. I thought I would expound a little bit more in depth about not only CSS but also the mechanics of web browsers. According to Wikipedia, "CSS is a style sheet language used for describing ... a document written in a markup language." (I added the emphasis on "a") Notice that it doesn't say "written in HTML" much less a specific version of HTML. CSS can be used on HTML, XHTML, XML, SGML, XAML, etc. Of course, you need something that will render each of these document types that will also apply styling. By definition, CSS does not know / understand / care about specific markup language tags. So, the tags may be "invalid" as far as HTML is concerned, but there is no concept of a "valid" tag/element/type in CSS.

    Modern visual browsers are not monolithic programs. They are an amalgam of different "engines" that have specific jobs to do. At a bare minimum I can think of 3 engines, the rendering engine, the CSS engine, and the javascript engine/VM. Not sure if the parser is part of the rendering engine (or vice versa) or if it is a separate engine, but you get the idea.

    Whether or not a visual browser (others have already addressed the fact that screen readers might have other challenges dealing with invalid tags) applies the formatting depends on whether the parser leaves the "invalid" tag in the document and then whether the rendering engine applies styles to that tag. Since it would make it more difficult to develop/maintain, CSS engines are not written to understand that "This is an HTML document so here are the list of valid tags / elements / types." CSS engines simply find tags / elements / types and then tell the rendering engine, "Here are the styles you should apply." Whether or not the rendering engine decides to actually apply the styles is up it.

    Here is an easy way to think of the basic flow from engine to engine: parser -> CSS -> rendering. In reality it is much more convoluted but this is good enough for starters.

    This answer is already too long so I will end there.

    0 讨论(0)
  • 谎友^
    2020-11-28 01:37

    From its early days CSS was designed to be markup agnostic so it can be used with any markup language producing tree alike DOM structures (SVG for example). Any tag that comply to name token production is perfectly valid in CSS. So your question is rather about HTML than CSS itself.

    Elements with custom tags are supported by HTML5 specification. HTML5 standardize the way how unknown elements must be parsed in the DOM. So HTML5 is the first HTML specification that enables custom elements strictly speaking. You just need to use HTML5 doctype <!DOCTYPE html> in your document.

    As of custom tag names themselves...

    This document http://www.w3.org/TR/custom-elements/ recommends custom tags you choose to contain at least one '-' (dash) symbol. This way they will not conflict with future HTML elements. Therefore you'd better change your doc to something like this:

    <style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body>
    0 讨论(0)
  • 盖世英雄少女心
    2020-11-28 01:38

    Why does CSS work with fake elements?

    (Most) browsers are designed to be (to some degree) forward compatible with future additions to HTML. Unrecognised elements are parsed into the DOM, but have no semantics or specialised default rendering associated with them.

    When a new element is added to the specification, sometimes CSS, JavaScript and ARIA can be used to provide the same functionality in older browsers (and the elements have to appear in the DOM for those languages to be able to manipulate them to add that functionality).

    (Although it should be noted that work is underway to define a means to extend HTML with custom elements, but this work is in the early stages of development at present so it should probably be avoided until it has matured.)

    Why doesn't my professor want me to use made-up elements?

    • They are not allowed by the HTML specification
    • They might conflict with future standard elements with the same name
    • There is probably an existing HTML element that is better suited to the task

    Also; why didn't he know that made-up elements existed and worked with CSS. Are they uncommon?

    Yes. People don't use them because they have the above problems.

    0 讨论(0)
  • 无人共我
    2020-11-28 01:38

    Although CSS has a thing called a "tag selector," it doesn't actually know what a tag is. That's left for the document's language to define. CSS was designed to be used not just with HTML, but also with XML, where (assuming you're not using a DTD or other validation scheme) the tags can be just about anything. You could use it with other languages too, though you would need to come up with your own semantics for exactly what things like "tags" and "attributes" correspond to.

    Browsers generally apply CSS to unknown tags in HTML, because this is considered better than breaking completely: at least they can display something. But it is very bad practice to use "fake" tags deliberately. One reason for this is that new tags do get defined from time to time, and if one is defined that looks sort of like your fake tag but doesn't quite work the same way, that can cause problems with your site on new browsers.

    0 讨论(0)
  • 故里飘歌
    2020-11-28 01:40

    This is possible with html5 but you need to take into consideration of older browsers.

    If you do decide to use them then, make sure to COMMENT your html!! Some people may have some trouble figuring out what it is so a comment could save them a ton of time.

    Something like this,

    <!-- Custom tags in use, refer to their CSS for aid -->

    When you make your own custom tag/elements the older browsers will have no clue what that is just like html5 elements like nav/section.

    If you are interested in this concept then I recommend to do it the right way.

    Getting started

    Custom Elements allow web developers to define new types of HTML elements. The spec is one of several new API primitives landing under the Web Components umbrella, but it's quite possibly the most important. Web Components don't exist without the features unlocked by custom elements:

    Define new HTML/DOM elements Create elements that extend from other elements Logically bundle together custom functionality into a single tag Extend the API of existing DOM elements

    There is a lot you can do with it and it does make your script beautiful as this article likes to put it. Custom Elements defining new elements in HTML.

    So lets recap,

    Pros

    • Very elegant and easy to read.

    • It is nice to not see so many divs. :p

    • Allows a unique feel to the code

    Cons

    • Older browser support is a strong thing to consider.

    • Other developers may have no clue what to do if they don't know about custom tags. (Explain to them or add comments to inform them)

    • Lastly one thing to take into consideration, but I am unsure, is block and inline elements. By using custom tags you are going to end up writing more css because of the custom tag won't have a default side to it.

    The choice is entirely up to you and you should base it on what the project is asking for.

    Update 1/2/2014

    Here is a very helpful article I found and figured I would share, Custom Elements.

    Learn the tech Why Custom Elements? Custom Elements let authors define their own elements. Authors associate JavaScript code with custom tag names, and then use those custom tag names as they would any standard tag.

    For example, after registering a special kind of button called super-button, use the super button just like this:

    Custom elements are still elements. We can create, use, manipulate, and compose them just as easily as any standard or today.

    This seems like a very good library to use but I did notice it didn't pass Window's Build status. This is also in a pre-alpha I believe so I would keep an eye on this while it develops.

    0 讨论(0)
 看不清?
提交回复
热议问题