I am building a web application which is supposed to be (on the development level) highly standardized.
To accomplish this i want to use custom namespace tags which in the sourse code appear as they do, but are modified by javascript depending on what they are.
For example:
<script type="text/javascript">
<!--
alert($('sy\\:icon').attr('location'));
//-->
</script>
<sy:icon id="icon1" location="/path/to/icon"></sy:icon>
Now i have tested this and it does work. What would happen in this example is the entire tag would be replaced by javascript with one or more tags and styles which are valid in html.
My only concern is how different browsers of various versions would respond to an invalid tag, even though it is about to be immediately replaced.
For the record, i am aware that using something like a <div> with a specific class for reference is the normal approach, however using a custom tag would both save space in the source code, and look a lot nicer in my opinion, im just concerned with the implications, if any.
You should declare your custom namespace in the <html> tag as described here. That blog author notes that it's cross-compatible between the various browsers, with IE support back to IE7, so you should be fine.
Related
I often see people suggesting I include the HTML5 shiv JS script to make HTML5 work in Internet Explorer but I can't find a clear explanation for the most common use cases this will cover.
Might someone give common scenarios of why one would need this JS script?
Also, does it need to be in the <head> or can I put it with the rest of my JS at the bottom of the <body> tag such that it doesn't block the UI thread?
Internet Explorer prior to version 9 refuses to apply any CSS styling to HTML elements it does not recognise, this includes the new elements brought in by HTML5. By creating the elements through the JavaScript DOM it suddenly and magically realises that the elements should indeed be styled.
You can write a naive and simple script that loops over an array of HTML5 tag names you want calling document.createElement(tagName). This may work for you in most cases, however, printing HTML5 pages in IE and adding HTML5 content through innerHTML will cause you further problems at which point it would be an idea to switch to the shiv.
HTML5 shiv can, to my best knowledge, be placed in the head or after the body tag if you prefer. I would recommend using conditional comments so that only IE loads it.
I'm having issues with IE8 not styling certain HTML5 elements with Backbone.js (0.9.1); the issue only arrises when using an HTML5 tagName for a View, and then appending the view's element.
I'm using modernizr and have the appropriate display:block css, and I can add other HTML5 elements using jQuery's html(), append(), etc, so this makes me think it is a Backbone specific issue.
At this point I'm debating between working around this and just never using HTML5 tagNames, or no longer using Backbone, neither of which is ideal. Any suggestions?
Here's the simplest example of the issue:
$(function(){
var test = Backbone.View.extend({ tagName: 'section' });
var section = new(test);
$('body').append(section.el);
});
Edit:
For some reason rolling back from Modernizr 2.5 to 2.0 fixed the issue for Views with HTML5 tagNames, but now I have to use innerShiv when appending template content into elements. Not sure why it didn't like 2.5, but it works for now.
Going to look into it further and see if I can narrow down why this is happening, and see if a better solution can be found.
From my experience with using tag names that aren't standard in non-modern browser (I'm looking at you, IE), you must use declare your own namespace and use your "custom" tag along with your namespace.
Windows Internet Explorer's support for custom tags on an HTML page
requires that a namespace be defined for the tag. Otherwise, the
custom tag is treated as an unknown tag when the document is parsed.
You can find the source article here in MSDN
Of course, declaring your own namespace is already non-trivial when it comes to writing html. In fact, it's unheard-of before I encounter this same problem. Needless to say, the implications is that you'd have tags that look like <namespace:section>.
Your solution would be to either stay away from the new and fancy HTML5 html tags if you are to support IE8, or you should customize your code to use different tag for IE8.
An alternate solution which I remember reading was to use classes with the same name as the new tags you intend to employ. For example, treat <div class="section"> the same as you would treat <section>.
I've noticed that jQuery can create, and access non-existent/non-standard HTML tags. For example,
$('body').append('<fake></fake>').html('blah');
var foo = $('fake').html(); // foo === 'blah'
Will this break in some kind of validation? Is it a bad idea, or are there times this is useful? The main question is, although it can be done, should it be done?
Thanks in advance!
You can use non-standard HTML tags and most of the browsers should work fine, that's why you can use HTML5 tags in browsers that don't recognize them and all you need to do is tell them how to style them (particularly which tags are display: block). But I wouldn't recommend doing it for two reasons: first it breaks validation, and second you may use some tag that will later get added to HTML and suddenly your page stops working in newer browsers.
The biggest issue I see with this is that if you create a tag that's useful to you, who's to say it won't someday become standard? If that happens it may end up playing a role or get styles that you don't anticipate, breaking your code.
The rules of HTML do say that if manipulated through script the result should be valid both before and after the manipulation.
Validation is a means to an end, so if it works for you in some way, then I wouldn't worry too much about it. That said, I wouldn't do it to "sneak" past validation while using something like facebook's <fb:fan /> element - I'd just suck it up and admit the code wasn't valid.
HTML as such allows you to use any markup you like. Browsers may react differently to unknown tags (and don't they to known ones, too?), but the general bottom line is that they ignore unknown tags and try to render their contents instead.
So technically, nothing is stopping you from using <fake> elements (compare what IE7 would do with an HTML5 page and the new tags defined there). HTML standardization has always been an after-the-fact process. Browser vendors invented tags and at some point the line was drawn and it was called HTMLx.
The real question is, if you positively must do it. And if you care whether the W3C validator likes your document or not. Or if you care whether your fellow programmers like your document or not.
If you can do the same and stay within the standard, it's not worth the hassle.
There's really no reason to do something like this. The better way is to use classes like
<p class = "my_class">
And then do something like
$('p.my_class').html('bah');
Edit:
The main reason that it's bad to use fake tags is because it makes your HTML invalid and could screw up the rendering of your page on certain browsers since they don't know how to treat the tag you've created (though most would treat it as some kind of DIV).
That's the main reason this isn't good, it just breaks standards and leads to confusing code that is difficult to maintain because you have to explain what your custom tags are for.
If you were really determined to use custom tags, you could make your web page a valid XML file and then use XSLT to transform the XML into valid HTML. But in this case, I'd just stick with classes.
For some complicated reason, I need to mark some Javascript as "special", like this:
<script type="text/javascript" someattribute="special">
var special = "I'm special!";
</script>
<script type="text/javascript" someattribute="special" src="special.js">
</script>
Is it possible to do this in way that complies with XHTML standards? According to http://www.w3schools.com/tags/tag_script.asp, all attributes for the script tag have very specific functions. But is there a workaround?
The idea is to pick up the tags as XML elements and put them in anther page, at server level, before it gets to the browser, so I need the special mark in the actual XML of the page. Adding it once the page has loaded, at browser level, using Javascript, will not work.
Any ideas?
Edit:
For the sake of standards-compliance, I can't use HTML5. The whole system I'm trying to be compliant with is XHTML 1.0.
Now that I've had time to think about it, I think that adding a GET variable or an anchor in the src of the script might just do the trick. For example, instead of the previous example, do
<script type="text/javascript" src="special.js?special"></script>
or
<script type="text/javascript" src="special.js#special"></script>
I'll try it now.
If you're using HTML5, you can do this:
<script data-special='true'>
</script>
and it'll validate. However, other than failing validation, you can get away with putting arbitrary attributes on tags and it'll generally work. Using the "data-" HTML5 convention is a safe way to go because you've got a 0% chance of accidentally triggering some weird behavior.
Note that with HTML5 you don't need the "type" attribute, and in fact it's deprecated in trendy Javascript circles.
Use data-* attributes.... They are standards-compliant:
<script data-foo="bar">
With XHTML you are able to create your own DTD and with your own DTD you can easily add an extra attribute to the script tag. However... since you probably want to use this in a real life website this won't work because Internet Explorer does not support that.
So I think these are your choices:
wrap a tag around it to mark it as special (completely standards compliant, works in every browser, but might not work for your check)
adhere to the standards and create your own DTD which will somewhat break IE support
ignore the standards and just add some attribute (noone besides the W3 validator will really care)
If you pick the last option, I suggest using the id attribute. Which, although not supported for script tags, is supported in both html and xhtml in general so browsers won't care too much about it and most validators won't care either.
I'm looking back a this post a long time later. This is just to say that what I wrote in my edit did work and was standards-compliant.
Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).
No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.
Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one).
In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.
You need to write own doctype or/and use own namespace to do this.
http://msdn.microsoft.com/en-us/magazine/cc301515.aspx
No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css
It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.
Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.
With the emergence of the emerging W3 Web Components standard, specifically the Custom Elements spec, you can now create your own custom HTML elements and register them with the parser with the document.register() DOM method.
X-Tag is a helpful sugar library, developed by Mozilla, that makes it even easier to work with Web Components, have a look: X-Tags.org