I'm trying to detect if a custom element has been registered yet, e.i if it is still unresolved.
In a browser that supports custom-element (e.g Chrome) I can do that by checking that is it is not an instance of HTMLUnknowElement and that it doesn't match the pseudo-class ":unresolved" with element.matches or any vendor-prefixed equivalent.
But when I'm working under polyfill, the matches/webkitMatchesSelector/mozMatchesSelector function breaks when called with ":unresolved"
Is there a way to have a peek on the list of unresolved elements ? Or any other way that would work under polyfilled browser ?
Thanks
EDIT
Just found that doc with a bookmarklette that detects any unresolved element on the current page. The problem is it doesn't work on polyfilled browsers.
The reason is that it check if the consctrucor is still HTMLElement whereas in a polyfilled browser the constructor is always HTMLUnknownElement
Related
Some time ago I have written an XSLT "program" that converts Eagle (PCB CAD) files to SVG. It runs on Firefox and Internet Explorer.
However, on current version of Chrome and Chromium, it will sometimes not work.
This one works and shows the schematic as SVG:
http://www.tu-chemnitz.de/~heha/enas/STS%20Multiplex/MFC-Verteiler.zip/MFC4.sch?as=SVG
Although very similar and even shorter, this one will show a blank screen:
http://www.tu-chemnitz.de/~heha/enas/UDX5114N.zip/sm5.sch?as=SVG
Both example URLs download genuine Eagle XML schematic files and let the browser do the conversion to SVG without Javascript.
Does someone has a clue how I can track down the problem, if even possible? (Is there something like an XSLT debugger for Chrome?)
In case of importance, I use Windows 7 64 bit German.
I am not sure it is a problem with Chrome, it seems your stylesheet sometimes generates HTML with embedded SVG and sometimes tries to output an SVG document but only gets the SVG namespace right on the root element and some container elements, the content elements are then created in no namespace e.g. end up as <text font-size="2.1336" transform="translate(13.97,154.94)scale(1,-1)" text-anchor="end" fill="#088" xmlns="">black</text>. So wherever you want to output SVG elements with XSLT you should make sure you output them with the right namespace, either using literal result elements with e.g. <text xmlns="http://www.w3.org/2000/svg">..</text> where the namespace could also be present on an ancestor of the literal result element in the stylesheet or by using <xsl:element namespace="http://www.w3.org/2000/svg" name="text">...</xsl:element>, where the namespace declaration could also be present on an ancestor element of the xsl:element in the stylesheet. Putting the namespace on an ancestor element of the result tree you generate in a different template causes the creation of element in no namespace.
For Firefox your stylesheet works differently and inserts a prefix (name="{$svgpre}g") for those SVG elements where the prefix together with the existing namespace declaration on the root puts the elements in the right namespace. Not sure why IE and Edge render the result, other than they seem to put everything into an HTML wrapper and ignore the namespaces in HTML5 fashion.
I know my XSLT: Generating SVG namespace for Firefox and not generating SVG namespace for Internet Explorer was the one and only way to bring it to work on both browsers. Moreover, as the first given example works well in Chrome (and most of my schematics), Chrome seems to have no problem with the missing name space, it's IE compatible, and I expect there is another reason why the second example won't work.
I've created a simple example http://jsbin.com/yifekigo/21/edit. It works in Chrome and does not in Firefox/Safari. It will work in Firefox if I change <nest-row mCols="{{mCols}}" y="{{y}}"></nest-row> to <nest-row mCols="4" y="{{y}}"></nest-row>.
How can I get Firefox and Safari to pass the value of mCols from nest-grid through to nest-row?
EDIT: See Scott's comment on his answer for the use of domReady as a workaround.
Sadly, on Firefox/Safari/IE, the DRY Polymer syntax is not supported in the main document. IOW, you must do:
Polymer('nest-grid', {...
instead of
Polymer({...
Again, this is only true for calls like this in the main document (which typically includes JsBin and friends). Polymer elements in imports can use the DRY syntax on all platforms.
Sorry for the trouble.
Can anyone explain the meaning of the attribute complete?
I read somewhere that it might have to do with DOM.
<img src="/folder/pic.jpeg" complete="complete" />
The attribute complete has no defined meaning by specifications, and it probably has no effect (though it can be read with the getAttribute() method). So the code in the question is probably based on some misunderstanding.
According to HTML5 drafts, there is the complete property for an object corresponding an img element, as per the HTMLImageElement interface. The definition of the complete property basically means that the value is true when the browser has completely received the image (though there are some nuances here). As this is to be controlled by the browser, reflecting the loading status, it is natural that the property is defined to be read-only.
This property is widely present browsers, but apparently in a broken way: if you have an img element that refers to a nonexistent resource (404 Not Found), then Chrome and Firefox indicate the property as having the value true (IE gets things right here: false). So the property is not of much use for the time being.
Setting an attribute in HTML has no effect on this. HTML attribute and element object properties correspond to each other only when a correspondence has been defined.
It's set when the image has been downloaded.
I've never seen it explicitly in the HTML like in your example (MDN says it's not an attribute for a img element) . I just use to check if the image has been downloaded with JavaScript (there are cross browser issues with that, however). The property on a HTMLImageElement returns a Boolean.
[].forEach.call(document.querySelector("img"), function(img) {
// Loaded?
img.complete && (img.style.border = "5px solid #f00");
});
It is used to check if the image has finished loading.
document.getElementsByTagName('img')[0].complete
returns true if has finished loading, else false.
However it is not used as an attribute like in your example.
Hello kind people of the internet,
I've been hacking at this for a while...and have seen several similar postings, but I can't seem to figure this out:
The HTML5 input field validation CSS works in Firefox, Chrome...but alas, not in IE8...and much of my target audience will be using IE8.
...and yes: I'm using Modernizr, and I used Initializr to get the page template and CSS...I'm a bit confused why I can't get things working properly in IE8.
Here's a link to my test page:
Test html5 page
The input field is red before proper entry, then validation simply turns green when input a valid account number, such as:
50011111111
The HTML5 code is as follows:
<label for="account">Account Number: </label>
<input id="account" name="inputAccount"
placeholder="input billing account number"
pattern="/(^500)|^\d{11}"
required
autofocus
type="text"/>
Any suggestions on what is probably a fairly simple thing to fix would be mucho appreciated!
IE just ignors HTML5 elements because it dosen't know about them. From the Modernizr docs
Modernizr runs through a little loop in JavaScript to enable the
various elements from HTML5 (as well as abbr) for styling in Internet
Explorer. Note that this does not mean it suddenly makes IE support
the Audio or Video element, it just means that you can use section
instead of div and style them in CSS.
What this says is that Modernizr will tell IE about the new tags in HTML5 so that you can use CSS on them, but dosen't actually make them do anything. Note too that Modernizr dosen't add default styles for the elements, so they recommend you use an HTML5 CSS reset that makes <section> tags display: block; for example.
With respect to your form validation topek was correct in explaining that Modernizr only detects browser capability, it dosen't actually do anything about it. The proccess behind Modernizr is that you use the built-in yepnope testing feature to see if the user's browser can do 'x' (in this case form validation) and then conditionally and asynchronously load a script or style to "polyfill" (a polite way of saying 'use javascript to mimic native behaviour) for it.
In your case, you will want to use Modernizr.load() to test for Modernizr.input.required and probably Modernizr.input.autofocus too, like this:
//the modernizr conditional load function
Modernizr.load({
//specify the tests, refer to the Modernizr docs for object names
test: Modernizr.input.required && Modernizr.input.placeholder,
//specify what to do if the browser fails the test, can be a function
nope: 'path/to/polyfill/script',
//sometimes you need to run some JS to init that script
complete: function(){ polyfillinitorwhatever(); }
});
And there you go, a pretty stripped-down Modernizr.load. While I find their docs meandering, they actually are very good. Every time I've had a problem and tweeted at Paul Irish, he's sent back a link to the docs where I actually did find my answer upon closer inspection.
Validation is one of the most complex HTML5 features for the browser makers to implement as a standard. While I really like it's simplicity, I've been continuing to use jQuery.validate in all cases except if the user has Chrome or Opera - the FF native validate is weak still. I'd recommend you stick with jQuery for now.
I recently found a new plugin jquery.h5form.
Using this, form validation, like in Opera, will be enabled in all browsers, even IE8.
I think, what you are still missing, is a html5 polyfill for the field validation. You could use for example: http://ericleads.com/h5validate/
More polyfills can be found under: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
IE8 does not support all, if any, HTML5 elements. You need to have an addon for html5 to work. One addon is modernizer
List of browsers with their score/compatibility in HTML5
It is relatively straight forward to iterate through IHTMLStyleSheetsCollection, IHTMLStyleSheet, IHTMLStyleSheetRulesCollection etc. of IHTMLDocument2 to obtain list of all styles in current document.
Any ideas on how to get a list of only used styles in the document? And to be more precise, I am looking for how to find out which images from the css files are being used in the document.
There is a program that says it is able to do this (determine which css images are being used) if IE8/IE9 is installed.
Thanks
Ok I have found an answer to this:
Recent browser versions (FF 3.5, IE 8) have implemented a querySelector method that can be used to query if a selector is used on a page.
see: https://developer.mozilla.org/En/DOM/Document.querySelector for more info.