W3C XHTML 1.0 Validator - was support for attributes "Integrity" and "Crossorigin" ever added? - xhtml

When trying to validate my Home page using the W3C validator I get the following errors.
Line 13, Column 92: there is no attribute "integrity" ….js"
type="text/javascript"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo…
Line 13, Column 158: there is no attribute "crossorigin"
…FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
This issue has only come to light following a recent program update. It seems that the developer has only just included these attributes. There is a thread (now 5 years old) relating to this and the W3C validator. Was checking and support for Integrity and Crossorigin ever added?
if($isConnected) {
echo "<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\" type=\"text/javascript\" integrity=\"sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=\" crossorigin=\"anonymous\"></script>\n";
echo "<script src=\"https://code.jquery.com/ui/1.12.1/jquery-ui.min.js\" type=\"text/javascript\" integrity=\"sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=\" crossorigin=\"anonymous\"></script>\n";
}
else {
echo "<script type=\"text/javascript\">// <![CDATA[\nwindow.jQuery || document.write(\"<script src='{$cms['tngpath']}js/jquery-3.3.1.min.js?v=910'>\\x3C/script>\")\n//]]></script>\n";
echo "<script type=\"text/javascript\">// <![CDATA[\nwindow.jQuery.ui || document.write(\"<script src='{$cms['tngpath']}js/jquery-ui-1.12.1.min.js?v=910'>\\x3C/script>\")\n//]]></script>\n";
}
Clearly the issue is with the two attributes as if I comment out the the first part of the code above forcing the "else" branch then I get a clean validation. However in doing this the program assumes that it is running "offline" and no off site web based content such as mapping is downloaded.

Those attributes were introduced in HTML 5. The validator supports them in versions of the language which support them. XHTML 1.0 is too old.

Related

Fixing accessibility error for lang tag in Kentico

I am facing Site-improve accessibility error that my page doesn't have a "lang tag" defined. How can I accomplish this in Kentico?
There are possibly two ways to achieve this. One is through C# .NET code in Kentico and the other is through Javascript code. I'm providing you both solutions
In order to fix this problem you have fix two tags for your tool to stop pointing accessibility error. You have to set both "lang" as well as "xml:lang" tag. One way to achieve this through pure Javascript is below. I am proposing this solution as it is independent of any platform.
(function() {
document.getElementsByTagName('html')[0].setAttribute('lang', 'en-US');
document.getElementsByTagName('html')[0].setAttribute('xml:lang','en-US');
})();
You may replace 'en' with language of your choice to correctly point the correct language in place
In Kentico you may achieve this by placing this code in your master template so that these tags can be added on all pages.
In your Kentico master template just add a Head HTML web part and put this code inside it.
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (CurrentDocument != null)
{
CMS.UIControls.ContentPage page= this.Page as CMS.UIControls.ContentPage;
if (page != null)
{
string lang= CMS.Localization.LocalizationContext.CurrentCulture.CultureCode;
page.XmlNamespace += " lang=\"" + lang + "\"";
page.XmlNamespace += " xml:lang=\"" + lang + "\"";
}
}
}
</script>
This should fix everything for you.
The recommended way is to open ~/CMSPages/PortalTemplate.aspx web form and edit the lang attribute manually just as you see fit.
Please note that generally speaking the modification of Kentico system files is not recommended, but in this case it is the best way to go. Just keep in mind to document all changes you make.
Edit:
Other solution which does not involve any customization is to use CMSPortalTemplatePage web.config key to set up path to a custom PortalTemplate file. This way you can clone Kentico's PortalTemplate.aspx, make modification in this cloned file and keep the original.
Possible usage:
<add key="CMSPortalTemplatePage" value="~/CMSPages/CustomPortalTemplate.aspx" />

How can I still run a custom IBundleTransform when EnableOptimization is off in ASP.NET?

First the background - I'm using Handlebars for templating HTML and I want to make use of the bundling and caching capabilities of ASP.NET Bundling to deliver the templates to the client. To that end I've created my own Bundle subclass and an implementation of IBundleTransform that does some necessary conversion of my templates. In particular I:
add the templates to visual studio as HTML but embed the template in a <script type='text/x-handlebars-template'>...</script> which seems to give me great template/html intellisense
in my implementation of IBundleTransform I wrap the final template in something along the lines of Injector.register('{0}', function() {{ return window.atob('{1}'); }}); where {0} is replaced with the path of the template and is used to fetch the template in client code and {1} is replaced with a base64 encoded form of the HTML (until I can figure out a better way of encoding the html string!)
My problem comes if I set BundleTable.EnableOptimizations = false at which point none of number 2 above occurs and I'm delivered the raw file. I've temporarily resorted to the following code which stops minification of all files but still transforms them :
BundleTable.EnableOptimizations = true;
if (System.Diagnostics.Debugger.IsAttached)
{
foreach (var bundle in bundles)
{
if (bundle.Path != "~/bundles/handlebars-templates")
bundle.Transforms.Clear();
}
}
Is there a better option that allows me to turn optimizations off, deliver all my templates individually to the browser but still have them transformed before they go?

IE11 User Agent String breaks <iframe>

I'm working with a Wordpress site that uses an iframe to make an external call to a button that populates on the page and provides a link to the same external site to book appointments.
The iframe works perfectly in all browsers except IE11. The user agent string in IE11 is set to default, but if I switch the string in IE's Developer Tools to anything IE10 and down, the button renders and operates perfectly.
So, does anyone know how to set the user agent string to anything but "default"? NOTE: This is not the same as setting User-Agent, which I've done, and it doesn't work. (or is it? ...and how?)
Example of what I've tried:
<meta http-equiv="X-UA-Compatible" content="IE=10"/> and variations of this.
UPDATE: As an added twist, the <iframe> loads in a different doctype and html declaration. Could this be part of my problem? (I don't have access to the code that's loaded by the iframe)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Please change your detection of IE, to not rely on UA string, but instead use conditional comments and document.documentMode
var tmp = document.documentMode, e, isIE;
// Try to force this property to be a string.
try{document.documentMode = "";}
catch(e){ };
// If document.documentMode is a number, then it is a read-only property, and so
// we have IE 8+.
// Otherwise, if conditional compilation works, then we have IE < 11.
// Otherwise, we have a non-IE browser.
isIE = typeof document.documentMode == "number" || eval("/*#cc_on!#*/!1");
// Switch back the value to be unobtrusive for non-IE browsers.
try{document.documentMode = tmp;}
catch(e){ };
See http://www.pinlady.net/PluginDetect/IE/
Also check https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID.userAgent if your code uses this attribute for detection.
In short it is not the UA string that breaks the iframe, it is the logic in the iframe that is broken, because it relies on UA sniffing instead of feature detection.
If you do not have control over the content displayed in the iframe, your best bet would be to contact the provider of the content that you display in the iframe and ask them to update their code to handle IE11 properly.

TWebBrowser in Delphi XE2 ignores box-sizing CSS [duplicate]

In my WinForms app, if I use a WebBrowser control, it seems to be forced into compatibility mode. How can I disable this, and make it behave the same as standalone IE does on my machine when browsing the same site?
I do not want to make registry changes. I want everything to be contained within my app.
The website I'm loading is not mine, so I do not have the ability to make changes to it (unless they can be done programmatically from within my app).
There is no way to do this other than configuring the following registry settings:
HKLM\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
or if it's a 32 bit app on 64 bit Windows:
HKLM\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION`
These settings aren't surfaced in the WebBrowser control.
For more information please see:
What IE compatibility mode does the webbrowser control use?
In case the link dies:
You create a DWORD value matching the name of your executable and set this value to one of:
7000: Pages containing standards-based <!DOCTYPE> directives are displayed in IE7 mode.
8000: Pages containing standards-based <!DOCTYPE> directives are displayed in IE8 mode
8888: Pages are always displayed in IE8 mode, regardless of the <!DOCTYPE> directive. (This bypasses the exceptions listed earlier.)
9000: Use IE9 settings!
9999: Force IE9
For example:
From my own experiments with IE9:
9000 - inherits the compatibility mode set in IE9's global compatibility mode setting. i.e.:
9999 - forces IE9 out of compatibility mode in the host application regardless of the globally configured compatibility mode setting
Your application would probably need to detect which underlying IE version is available to determine which value to use:
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Version
or if it's a 32 bit app on 64 bit Windows:
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Version
There's also this older article from when IE8 came out which is worth a look:
More IE8 Extensibility Improvements
You can also configure these settings on a per user basis under:
HKCU\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
Although it's not what you asked, if you own the site you can add the following into the head section of the html.:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
See:
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
Here is the skinny of the problem: If a user enables Compatibility View in IE8 then it will override all page directives. So any page or server variable you attempt to use will fail to prevent IE from switching to Compatibility View if the user has turned on this feature in IE. Most people think page directives or some kind of secret header server variable will fix the site. Nope. None of these solutions work if the setting has been manually overridden. I know, it is just not cool. So the following will work only if the user has not enabled the compatibility view feature.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
To clarify the steps to change this in the registry edit the key:
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION
Then add a new DWORD called iexplore.exe. To do this right-click the key and select New > DWORD. Give that DWORD the decimal value of 9999. This will make all sites render without compatibility view. To enable Compatibility View again delete this DWORD. Also if you wish to automate this change and run a batch script on your system check out Michal M's script.
https://gist.github.com/michal-m/1853315
I know that this is an old question but there's a way to insert a header in the webbrowser control in Visual Basic 2010 and later in order to disable the compatibility view:
The first thing you need to do is to catch the current web page and then replace the head tag as follows:
Sub compatible()
' --- simple routine to disable compatible view.
Dim the_url As String
Dim message As String
Dim theReplacement As String
Dim oldMessage As String
the_url = WebBrowser1.Url.OriginalString
WebBrowser1.Navigate(the_url)
message = "<head>" + Chr(13) + Chr(10) + "<meta http-equiv=" + Chr(34) + "X-UA-Compatible" + Chr(34) + "content=" + Chr(34) + "IE=edge" + Chr(34) + " />" + Chr(13) + Chr(10) + "<base href=" + Chr(34) + the_url + Chr(34) + ">"
oldMessage = WebBrowser1.DocumentText.ToString()
theReplacement = Replace(oldMessage, "<head>", message)
WebBrowser1.DocumentText = theReplacement
End Sub
This code adds the two following lines in the webbrowser control:
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<base href="(url of the web page)">

Validation error in HTML5 for custom search from google (gcse:searchbox-only) [duplicate]

I am getting the following error in w3 validator,
Line 62, Column 140: Element name gcse:searchbox-only cannot be represented as XML 1.0.
I am using Google search bar inside website which is added by this code,
<gcse:searchbox-only></gcse:searchbox-only>
Please help out to avoid this error. Thanks
I found this answer hidden in the google docs:
https://developers.google.com/custom-search/docs/element#html5
HTML5-valid div tags
You can use HTML5-valid div tags as long as you observe these guidelines:
The class attribute must be set to gcse-XXX
Any attributes must be prefixed with data-.
For example:
<div class="gcse-searchbox" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search" >
You could always use <div class="gcse-search"></div> instead of <gcse:search></gcse:search>, then the error will go away from the w3c validator.
Michael[tm] Smith, the guy who looks after the W3C HTML validator says here:
It's not an error, it's a warning. And it's emitted because the
content is being served as HTML instead of with an XML MIME type, and
HTML parsers don't know anything about namespaces -- to put it in XML
terms, every element name is a local name -- and so in HTML, the
literal name of that element is "g:plusone". And that name can't be
represented in XML because XML doesn't allow colons in the local
names. So the spirit of the warning is to say, In case you ever want
to serve this content as XML instead of HTML, you have an element name
in it that's not allowed in XML.
He's talking about the element g:plusone but it's the same issue.
But I disagree slightly. Colons are valid in element local names in XML 1.0. They're only disallowed in XML 1.0 + namespaces So the warning message could definitely be improved.
UPDATE:
I previously offered a workaround based on document.write, but as Jan M points out in the comments, IE has it's own ideas about what to do with elements with a colon in their tag names, so it didn't work there. Instead, I recommend following Jan's answer.
Solution is very simple, Don't use directly the google search tag in html page.
Just place a simple javascript code to insert the google search tag in html by javascript's innerhtml option.
Here is the example:
<div id="gsearch"></div>
<script>
var gcseDiv = document.getElementById('gsearch');
gcseDiv.innerHTML = '<gcse:search></gcse:search>'
</script>
After this line you can write or paste your google search code which will be same as below
<script>
(function() {
var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
Suggestion: Just put the above div and both script in a single parent div and manage css for parent div only.
Maybe this is too simple, but I worked around the problem by just putting this inside and at the end of the javascript:
document.write('<gcse:search><\/gcse:search>');
And removed
It works in IE, Chrome, Firefox and Safari and validates.
Use the following code if you only want to display the searchbox (without the resultsbox) using a DIV:
<div class="gcse-searchbox-only"></div>

Resources