Zhongde Liu

This is my personal "Clipboard" of web development stuff I come across


Leave a comment

Stylesheet limits in Internet Explorer <= 9

One point on the web performance list is: “Concatinate and minify all your css into one file”. However in IE (version lower than 10), you have an internal limit regarding the stylesheet file.

These are the facts:

  • A sheet may contain up to 4095 rules
  • A sheet may @import up to 31 sheets
  • @import nesting supports up to 4 levels deep

The official statement on the MSDN blog here:  http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx

If you eventually  get over these marks (and with an optimized generated css file, it is more likely) , you have to split your stylesheets into multiple files (in Production).

For example, github.com currently uses two css files for its normal website, named github.css and github2.css.

 


Leave a comment

Note: Whitespace raises jQuery error (Ajax, jQuery 1.9)

Just stumbled upon a bug/feature when migrating to jQuery 1.9.

So the case is: You are trying to convert following String:

"   <div>Hallo</div>"

into a jQuery object. Pay attention to the leading whitespace.

Prior to 1.9 you get what you would expect. With 1.9, you will get an error.  Reason is this core change, documented here http://jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring. As I’m not the only one with this issue, there are already several posts about it (the intention, the pros, contras…). This is the according thread in the jQuery tracker: http://bugs.jquery.com/ticket/13223 .

There is also mentioned to re-implement the old behavior.


Leave a comment

Code: load handler with cached images and IE

Just had a strange case, that the load event of an image is not fired. After a short research I found the issue…

Not working code:
$('img').attr('src', 'image.jpg').load(function() {
//Do something - but it doesn't
});

Working code:
$('img').load(function() {
//Do something - it does
}).attr('src', 'image.jpg');

The thing is IE (and Opera) will load the cached image directly before your event handler is attached…

It is jQuery Notation but also applies to Vanilla JS.


1 Comment

HTML5 Video Encoding – Codecs

There is no single combination of containers and codecs that works in all HTML5 browsers.

For maximum compatibility you need more than one version:

Container: WebM
Video-Codec: VP8
Audio-Codec: Vorbis

Container: Ogg
Video: Theora
Audio: Vorbis

Container: MP4
Video: H.264 baseline-profile
Audio: AAC (low complexity)

For MP4 Mobile pay attention to possible  max-resolutions on the different devices:
480×320 (base), 640×480 (no older androids, blackberrys) or more e.g. 1280×720 (only ‘new’ devices)…

 

More Info and references:

http://fortuito.us/diveintohtml5/video.html

http://blog.zencoder.com/2010/09/30/how-to-encode-video-for-mobile-use/

 

Frameworks/Libs for HTML5 implementation:

http://mediaelementjs.com/

http://videojs.com/


2 Comments

How-To: npm behind a proxy

When you want to use npm (http://npmjs.org/), package manager for node, behind a proxy, pay attention that there are two parameters for setting up a proxy:

  1. proxy
  2. https-proxy

As https is the default protocol for fetching the packages from the npm repository you must set the second one.

Another workaround is to change the rep url into a http one.