We have a universal React application sitting behind a CDN.
We want to serve up HTML with srcset images from the server, but need to handle the fact that IE will not support this HTML feature, ideally using feature detection.
As the site is served from a CDN, IE will get the same initial HTML as other browsers. When the page loads in the browser, we want to swap out these srcset image tags for some different HTML, but this means React will complain about a mismatch between the client side HTML and the already rendered server side HTML.
What's the best way to handle this?
e.g.
ignore the warning, or specify it's ok somewhere?
use a client side polyfill that happens after the page has loaded e.g. using componentDidMount? In this case, how do we handle subsequent renders of an unchanged component not rewrite this HTML on the client?
use a cache key on the CDN for the user agent - but this would mean sniffing browser rather than using feature detection
The best and most compliant way is to leave both attributes. My guess is that browser will use "src" as a fallback but use "srcset" if available.
No polyfills or strange manipulations needed here :)
Related
Is there a simple way to detect if the user's browser supports neither Web Components nor the webcomponentsjs polyfill?
Thanks!
No for different reasons:
Web Components is a set a severral distinct features (Custom Elements, Shadow DOM, HTML template, HTML Imports), so some could be supported by one browser version while other not.
Polyfills themselves are using JavaScript "advanced" features that are not necessarily implemented in the broser. For example, ShadyCSS is using Array.from() that is not implemented in Internet Explorer 11 and therefore needs another polyfill to work.
Therefore, depending on what you really need, use an ad-hoc feature detection test, or try / catch test.
Is it good to implement website elements like css, javascripts, images or web links without the protocol?
For example: jquery.com offer the cdn-file without:
//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
Pro for using is, that they automatically use the current protocol (http or https). Even the links are shorter (okay, just 4/5 signs). Are there any cons or should I use it on my own website?
Is there any definition about how browsers deal with this kind of links (official standard)?
href without protocol (Protocol-relative URL) is used to remove the naggy warning of accessing unsecure content in IE.
But it'll cause double download in IE7 and IE8 (alas, WHY U NO SMART!!!).
The standard RFC3986 is mentioned in Paul Irish's article. But standard can only serve as a reference in web development, the browser vendors' implementations is more important. Websites like Can I Use, WebPlatform documents this info.
Do refer to these links:
http://www.paulirish.com/2010/the-protocol-relative-url/
http://blog.httpwatch.com/2010/02/10/using-protocol-relative-urls-to-switch-between-http-and-https/
http://www.stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/
Is anyone aware of whether it is problematic to use protocol relative URLs for an image source to prevent mixed content security warnings.
For example linking an image like:
<img src="//domain.com/img.jpg" />
instead of:
<img src="http://domain.com/img.jpg" />
or
<img src="https//domain.com/img.jpg" />
In my testing i've not seen anything to suggest this is wrong but i'm not sure if it has edge cases where it will create problems.
EDIT i've seen it throw errors when using PHP's getimagesize function.
Found an interesting gotcha for the use of protocol relative URLs:
You have to be careful to only use
this syntax in pages destined for
browsers. If you put it in an email,
there will be no base page URL to use
in resolving the relative URL. In
Outlook at least, this URL will be
interpreted as a Windows network file,
not what you intended.
from here
Essentially though there are no valid reasons why this shouldn't work as long as the request is made by a browser and not an external email client.
more info from here:
A relative URL without a scheme (http:
or https:) is valid, per RTF 3986:
Section 4.2. If a client chokes on it,
then it's the client's fault because
they're not complying with the URI
syntax specified in the RFC.
Your example is valid and should work.
I've used that relative URL method
myself on heavily trafficked sites and
have had zero complaints. Also, we
test our sites in Firefox, Safari,
IE6, IE7 and Opera. These browsers all
understand that URL format
IE 7 and IE 8 will download stylesheets twice if you're using a protocol-relative URL. That won't affect you if you only use it "for an image source", but just in case.
The following should be considered when using Protocol-Relative URLs:
1) All modern browsers support this feature.
2) We have to be sure that the requested resource is accessible over both HTTP and HTTPS. If HTTP redirects to HTTPS it is fine, but here the load time will take a little longer than if the request was made directly to the HTTPS.
3) Internet Explorer 6 does not support this feature.
4) Internet Explorer 7 and 8 support the feature, but they will download a stylesheet twice if protocol-relative URLs are used for the css files.
In which case webpage loads without external stylesheet in chrome or safari ?
I am talking about a case in which webbrowser first loads webpage without stylesheet and then redraw it with css once it becomes available.
It would be great If you give me a small html page with external stylesheet, which always loads webpage without external stylesheet.
I am a webkit developer and want that case to do some development in webkit engine.
I believe that this is always the case. In other words, CSS files are always loaded asynchronously, and when they become available they are stored in the broser and applied to the existing DOM.
If you are interested in slow loading files, you can simulate this and see how your browser behaves. Best way is the following: get yourself a php and apache installation (say XAMPP), instruct Apache to handle .css files as php files (i.e. execute php code in css files), create a new css file and at its to add <? sleep(20); ?>. This will cause the css file to be delayed by 20 seconds, effectively simulating the slowloading.
Other than that, you could also wish to load a CSS file after the page is already loaded. Here you can find an example: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/
Is there a way for nesting an image in an HTML page *inline* in IE7?
I can't use external resource, all because of a particular server configuration (it's a web dispatcher in maintenance mode that redirects all requests to a single .html page).
So I can't afford using the classical embedding by using the following:
<html>
<img src="mypic.jpg" />
</html>
When looking for a solution, I found these:
Using inline SVG within an XHTML file # => I can't use XHTML extension in my case the page has the .html extension (and I can't change it)
Using base64 encoding # => It works pretty well with Firefox & Chrome, but not in IE7
None of which seem to be working in my configuration.
The more I seek the less I hope. Any ideas?
The only option, as far as I know, for embedded image in an HTML document for current versions of Internet Explorer is VML (which isn't supported by anything other than Internet Explorer).
You could use something like Raphaël to abstract the VML or SVG into a single JS script (but that would add a dependency on JavaScript).
That easiest option would probably be to reference a normal image on an external URI … on a different server.
For the svg solution, your page doesn't need to end in .xhtml. In fact, it can end in whatever extension is handled by your web server.
The page being in xhtml is defined by its doctype definition. Put the doctype definition of xhtml 1.0 (strict or transitional) or even better xhtml1.1 and embed svg in the page.
As an alternate solution, you could try to output the image directly with an .html extension, keeping its original mime (image/jpeg for instance) but I'm not sure it would work.
Instead of redirecting to a single .html page, you could redirect to a single image and put your text on the image. This has obvious drawbacks, but how important is the image?
What you meant by base 64 encoded?