jQueryUI css errors - jquery-ui

When I load jQueryUI on a Windows XP machine using Firefox 3.6.3, I get a bunch of css errors:
Error in parsing value for 'filter' Lines 18, 76, 77.
Unknown property 'border-top-left-radius' Line 274.
Unknown property 'border-top-right-radius' Line 275.
unknown property 'zoom' Lines 300,306,336,345,385,408.
Q: Should I just ignore these errors?

The basic reason for these CSS errors is that every browser has its own set of CSS properties that jQuery UI makes use of. For example:
-moz-user-select is only available in Firefox and Mozilla-based browsers.
Equivalent to this property, WebKit-based browsers (like Google Chrome and Safari) have -webkit-user-select.
jQuery UI makes use of these special CSS properties available in different browsers and this gracefully degrades to nothing if the browser doesn't support that particular property. jQuery UI makes pretty sure that all its widgets appear consistent across browsers. And that is the reason why its safe to avoid such errors without any visual artifacts being generated by them.

Yes, you should ignore these.
There are attributes in there to support all browsers, not all necessarily valid CSS, but it works.
You can see a full list of current validation errors here (jQuery UI 1.8)

Yes. jQuery UI is using properties that are not consistent across browsers. Since there really isn't any "logic" in CSS, they have to list all possibilities for all browsers.
These errors are safe to ignore.

Related

Orbeon - How can I prevent a component's CSS from being rewritten by the Server Side Embedding API?

I have created a custom XBL component that includes very little markup. It primarily consists of CSS, JavaScript and a <div>. The JavaScript then writes the markup to the DOM, inside the <div>. Its CSS specifies styles for a lot of specific element IDs. This works just fine in Form Runner, but not with the Server Side Embedding API.
The Server Side Embedding API appears to be rewriting the CSS file. It prefixes all the CSS selectors for specific IDs with o0. For example #MultiMousePosition-cwm is changed to #o0MultiMousePosition-cwm. This might work fine if the markup of the elements were included in the XBL component. Then it could be rewritten. But since the markup is generated by JavaScript after the page is loaded, this doesn't happen.
Is the rewrite of CSS and element IDs done in case the API is used to include multiple forms in the same page?
Is there a way to prevent the CSS from being rewritten? Or is there some other way to deal with this problem?
I tried to use <xxbl:global> but it looks like that won't work for CSS resources.
The JavaScript is a complex library created by another developer and rewriting it to avoid this issue would take a significant amount of work, if it is possible.
The rewrite of ids is done to prevent id conflicts in the resulting HTML page. That can include supporting multiple forms, but also possible conflicts with other content on the page.
Currently there is no way to disable rewriting. It wouldn't be hard to add as a configuration property, possibly on the XBL components (though some things would need to be rewritten on some not, which might make the configuration more difficult), or globally, for users who know for sure they won't have id conflicts.

Check browser version using Dart rather than JS?

Is there an "Angular/Dart" way to detect older unsupported browsers and prevent to continue with an elegant message (there are plenty of examples using javascript) rather than continue and show a weird layout with code that doesn't work?
Even the angulardart.org/demo site should do this IMO to stop IE8 (I know, but some enterprise customers still have those old browsers installed - and set as default - for legacy apps) from showing content that doesn't even work.
If Dart code cannot be executed the test has to be done in Js. I'm not aware of a library that makes this test.
The test should follow What browsers do you support as JavaScript compilation targets?.

Windows 8 Phonegap Application JQuery Mobile Security Exception

I have created a windows 8 project using the phonegap 2.9.0 and then tried to use JQuery mobile library within it. But I get the following security exception. Any idea how to resolve this ?.
Exception was thrown at line 4, column 7009 in ms-appx://c6a291ce-903f-47ab-b167- cb8378ffb051/www/libs/jquery.core/jquery-1.9.1.min.js
0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
If there is a handler for this exception, the program may be safely continued.
I have just run into the same problem. It appears that the grist of the matter is that the WinJS security model won't allow the JQuery dom manipulation when you create elements from strings e.g. using the .html() method.
See the below for more information:
http://blogs.msdn.com/b/windowsappdev/archive/2013/04/01/windows-store-app-support-in-jquery-version-2-0.aspx
http://net.tutsplus.com/tutorials/javascript-ajax/building-windows-store-applications-with-jquery-2-0/
In summary the clever people have produced a fix to this in JQuery 2.0.
So I'll be looking at using JQuery 2.0 but will it work with JQuery Mobile? I haven't determined that yet so I'll probably look at fully building and attaching the dom elements rather than using the .html() method.
But please note that I have not tried any of these approaches yet so cannot vouch for their validity.

Getting VS2010, and specifically a Razor view, to recognize custom "data-" attributes as valid

I know that HTML5 supports custom data-* attributes, and I know that VS2010 SP1 is supposed to have HTML5 support included.
However, when I installed VS2010 SP1, I'm still getting validation errors on elements with data-* attributes.
For example, this:
<a id="Clicky" data-for="#Model.Id">Clicky</a>
Yields the following warning in VS2010:
Validation (XHTML 1.0 Transitional): Attribute 'data-for' is not a valid attribute of element 'a'.
While I understand that these are just warnings and can safely be ignored, I'm trying to keep my site as standards compliant as possible, and if my warnings list is spammed with these warnings, I won't be able to see the valid warnings through all the noise.
Am I doing something wrong, or must I live with seeing these warnings?
Thanks in advance.
There is a little dropdown that you need to change to use HTML5 or others (XHTML 5, XHTML 1.1, etc.)
Click View --> Toolbars --> HTML Source Editing.
There will be a dropdown. Then choose HTML5.
There is also a "Web Standards Update" extension available in the Visual Studio Extension Manager that updates some of the CSS/HTML5 intellisense features.
http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83?SRC=VSIDE

Asp.net MVC page is giving Mime type warnings for image files

While I do not see any functionally or jquery UI elements affected by this, but when I access my asp.net mvc web page the chrome developer console is logged with a bunch of error messages like so:
Resource interpreted as image but transferred with MIME type application/octet-stream.
All of the warnings are for jquery UI images (though I don't have any custom images on there so I don't know if it's jquery UI only). All the jquery images still load correctly.
Does anyone have any insight on why this is happening?
Are you running your site from Visual Studio's built-in web server? Apparently, you don't have much control over the MIME types in that environment (see this). I was seeing the same behavior and was starting to stress about it before finally realizing that I wasn't even looking at the IIS-hosted application.

Resources