best cricut
Jun
30
2009
9

jQuery IE detection issue workaround

We recently discovered an issue with jQuery.browser.version detection, it reports wrong Internet Explorer versions on some corrupted IE userAgent strings. A corrupted IE8 userAgent string may look like,

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; GTB6; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30618; .NET CLR 1.1.4322; InfoPath.2)

In this case jQuery.browser.version will report browser version 6.0 instead of 8.0, this will result some jQuery plugins to show a 'not implemented' error in IE8. So far we know jqModal and FancyBox are affected. Because they rely on jQuery.browser.version to detect IE6, and run some IE6 specific codes, which caused IE8 to fail, another sad story from MS.

Although we believe it's not the problem with jQuery or IE (Microsoft) alone, the best fix will be patching the plugins to detect IE6. i.e. to detect IE6 properly with jQuery, you will need the following code, which has an extra check by using window.XMLHttpRequest.

ie6=$.browser.msie&&($.browser.version == "6.0")&&!window.XMLHttpRequest;

If you curious about how userAgnet string got corrupted, we don't have much clue about it, some say it's due to an earlier release of IE8 (however as we aware, some IE7 has got the same issue), but in our office 3 out of 10 PCs has got the corrupted string. To fix it, you need to look for the following registry keys,

HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent\Post Platform
HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\User Agent\Post Platform
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent\Post Platform
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\User Agent\Post Platform

Or if you want to do more then just differentiate IEs, you may find a good browser detection Javascript here.

Some side note, you might notice jQuery has marked jQuery.browser deprecated since 1.3 in the favour of jQuery.support. We understand why jQuery would want to take this approach, and it's a good step forward. However jQuery.support would only be good if it tells all the feature differences among browsers, rendering engines, and standard modes. As web develops we don't learn the differences first then start developing a site, we only come across the differences and try to figure out what feature difference cause the different final result will be really time consuming. Until the time all the browsers come to the same standard and feature set, patching and hacking may be the only way for web developers, no one-stop solution would be available at any moment before that epoch. May God blessing all the web developers please.

Written by in: Web Development | Tags: , , , ,
Apr
09
2009
2

CSS Implementation Chart for IE6,IE7 and IE8

Since Internet Explorer8 has just joined the infamous IE family, which added bit of work (chaos) in the compatibility war. We have designed the following tool to show the difference between the "recent" IE versions, namely 6,7 and 8. Hope this would help web developers who care about browser compatibility.

Referenced from MSDN: CSS Compatibility and IE



@ Rules

IE6IE7IE8
@charset
@import
@media
@page
@font-face
@namespace

Selectors

NoteIE6IE7IE8
.value { sRules }Class
#value { sRules }ID
E { sRules }Type
* { sRules }Universal
ns|E { sRules }Namespaced
[att=val] { sRules }Equality [=]
[att] { sRules }Existence []
[att|=val] { sRules }Hyphen [|=]
[att~=val] { sRules }Whitespace [~=]
[ns|attr] { sRules }Namespaced
[att^=val] { sRules }Prefix [^=]
[att*=val] { sRules }Substring [*=]
[att$=val] { sRules }Suffix [$=]
E + F { sRules }Adjacent Sibling (+)
E > F { sRules }Child (>)
E F { sRules }Descendant
E ~ F { sRules }General Sibling (~)
:active { sRules }:active
:first-child { sRules }:first-child
:focus { sRules }:focus
:hover { sRules }:hover
:lang(C) { sRules }:lang()
:link { sRules }:link
:visited { sRules }:visited
@page :first { sRules }@page :first
@page :left { sRules }@page :left
@page :right { sRules }@page :right
:root { sRules }:root
:nth-child() { sRules }:nth-child()
:nth-last-child() { sRules }:nth-last-child()
:nth-of-type() { sRules }:nth-of-type()
:nth-last-of-type() { sRules }:nth-last-of-type()
:last-child { sRules }:last-child
:first-of-type { sRules }:first-of-type
:last-of-type { sRules }:last-of-type
:only-child { sRules }:only-child
:only-of-type { sRules }:only-of-type
:empty { sRules }:empty
:target { sRules }:target
:not(X) { sRules }:not()
:enabled { sRules }:enabled
:disabled { sRules }:disabled
:checked { sRules }:checked
:indeterminate { sRules }:indeterminate
:default { sRules }:default
:valid { sRules }:valid
:invalid { sRules }:invalid
:in-range { sRules }:in-range
:out-of-range { sRules }:out-of-range
:required { sRules }:required
:optional { sRules }:optional
:read-only { sRules }:read-only
:read-write { sRules }:read-write
:after { sRules }:after
:before { sRules }:before
:first-letter { sRules }:first-letter
:first-line { sRules }:first-line
::before { sRules }::before
::after { sRules }::after
::first-letter { sRules }::first-letter
::first-line { sRules }::first-line
::selection { sRules }::selection
::value { sRules }::value
::choices { sRules }::choices
::repeat-item { sRules }::repeat-item
::repeat-index { sRules }::repeat-index
{ sRule!important? }!important Declaration
{ list-style : sStyle }list-style
{ list-style-image : sStyle }list-style-image
{ list-style-position : sStyle }list-style-position
{ list-style-type : sStyle }list-style-type
{ color : sColor }color
{ background : sBackground }background
{ background-attachment : sAttachment }background-attachment
{ background-color : sColor }background-color
{ background-image : sLocation }background-image
{ background-position : sPosition }background-position
{ background-repeat : sRepeat }background-repeat
{ color-profile : sProfile }color-profile
{ rendering-intent : sIntent }rendering-intent
{ background : sBackground1,sBackground2, etc. }background (multiple)
{ background-clip : sClip }background-clip
{ background-origin : sOrigin }background-origin
{ background-break : sBreak }background-break
{ background-size : sSize }background-size
{ direction : sDirection }direction
{ font : sFont }font
{ font-family : sFamily }font-family
{ font-size : sSize }font-size
{ font-style : sStyle }font-style
{ font-variant : sVariant }font-variant
{ font-weight : sWeight }font-weight
{ letter-spacing : sSpacing }letter-spacing
{ line-height : sHeight }line-height
{ text-align : sAlign }text-align
{ text-decoration : sDecoration }text-decoration
{ text-indent : sIndent }text-indent
{ text-transform : sTransform }text-transform
{ unicode-bidi : sAlign }unicode-bidi
{ vertical-align : sAlign }vertical-align
{ white-space : sWrap }white-space
{ word-spacing : sSpacing }word-spacing
{ font-effect : sEffect }font-effect
{ font-emphasize : sEmphasize }font-emphasize
{ font-size-adjust : sSizeAdjust }font-size-adjust
{ font-smooth : sSmooth }font-smooth
{ font-stretch : sStretch }font-stretch
{ hanging-punctuation : sHangingPunctuation }hanging-punctuation
{ punctuation-trim : sTrim }punctuation-trim
{ ruby-align : sRubyAlign }ruby-align
{ ruby-overhang : sRubyOverhang }ruby-overhang
{ ruby-position : sRubyPlacement }ruby-position
{ ruby-span : sRubySpan }ruby-span
{ text-align-last : sAlignLast }text-align-last
{ text-emphasis : sEmphasis }text-emphasis
{ text-justify : sJustify }text-justify
{ text-outline : sOutline }text-outline
{ text-overflow : sOverflow}text-overflow
{ text-shadow : sShadow }text-shadow
{ text-wrap : sWrap }text-wrap
{ word-break : sBreak }word-break
{ word-wrap : sWrap }word-wrap
{ writing-mode : sFlow }writing-mode
{ content : sContent }content
{ counter-increment : sCounter }counter-increment
{ counter-reset : sCounter }counter-reset
{ quotes : sQuotes }quotes
{ border : sBorder }border
{ border-bottom : sBottom }border-bottom
{ border-bottom-color : sColor }border-bottom-color
{ border-bottom-style : sStyle }border-bottom-style
{ border-bottom-width : sWidth }border-bottom-width
{ border-collapse : sCollapse }border-collapse
{ border-color : sColor }border-color
{ border-left : sLeft }border-left
{ border-left-color : sColor }border-left-color
{ border-left-style : sStyle }border-left-style
{ border-left-width : sWidth }border-left-width
{ border-right : sRight}border-right
{ border-right-color : sColor }border-right-color
{ border-right-style : sStyle }border-right-style
{ border-right-width : sWidth }border-right-width
{ border-spacing : sSpacing }border-spacing
{ border-style : sStyle }border-style
{ border-top : sTop }border-top
{ border-top-color : sColor }border-top-color
{ border-top-style : sStyle }border-top-style
{ border-top-width : sWidth }border-top-width
{ border-width : sWidth }border-width
{ caption-side : sLocation }caption-side
{ clear : sClear }clear
{ empty-cells : sEmptyCells }empty-cells
{ float : sFloat }float
{ margin : sMargin }margin
{ margin-bottom : sHeight }margin-bottom
{ margin-left : sWidth }margin-left
{ margin-right : sWidth }margin-right
{ margin-top : sHeight }margin-top
{ padding : sPadding }padding
{ padding-bottom : sPadding }padding-bottom
{ padding-left : sPadding }padding-left
{ padding-right : sPadding }padding-right
{ padding-top : sPadding }padding-top
{ table-layout : sLayout }table-layout
{ border-break : sBreak }border-break
{ border-image : sImage }border-image
{ border-radius : sRadius }border-radius
{ box-shadow : sShadow }box-shadow
{ bottom : sBottom }bottom
{ clip : sClip }clip
{ display : sDisplay }display
{ height : sHeight }height
{ left : sPosition }left
{ max-height : sMaxHeight }max-height
{ max-width : sWidth }max-width
{ min-height : sMinHeight }min-height
{ min-width : sMinWidth }min-width
{ overflow : sOverflow }overflow
{ position : sPosition }position
{ right : sPosition }right
{ top : sTop }top
{ visibility : sVisibility }visibility
{ width : sWidth }width
{ z-index : vOrder }z-index
{ overflow-x : sOverflow }overflow-x
{ overflow-y : sOverflow }overflow-y
{ orphans : nLines }orphans
{ page-break-after : sBreak }page-break-after
{ page-break-before : sBreak }page-break-before
{ page-break-inside : sBreak }page-break-inside
{ widows : nLines }widows
{ fit : sFit }fit
{ fit-position : sPosition }fit-position
{ image-orientation : sOrientation }image-orientation
{ page : sPage }page
{ size : sSize }size
{ cursor : sCursor }cursor
{ outline : sOutline }outline
{ outline-color : sColor }outline-color
{ outline-style : sStyle }outline-style
{ outline-width : sWidth }outline-width
{ appearance : sAppearance }appearance
{ box-sizing : sSizing }box-sizing
{ icon : sIcon }icon
{ nav-down : sNavDown }nav-down
{ nav-index : sIndex }nav-index
{ nav-left : sNavLeft }nav-left
{ nav-right : sNavRight }nav-right
{ nav-up : sNavUp }nav-up
{ outline-offset : sOffset }outline-offset
{ outline-radius : sRadius }outline-radius
{ resize : sResize }resize
{ column-break-after : sSize }column-break-after
{ column-break-before : sSize }column-break-before
{ column-break-inside : sSize }column-break-inside
{ column-count : sCount }column-count
{ column-gap : sSize }column-gap
{ column-rule : sRule }column-rule
{ columns : sColumns }columns

Values

IE6IE7IE8
<number>
<length>
<percentage>
<integer>
<angle>
<time>
<frequency>
<string>
\code
rect()
url()
counter()
attr()
calc()
<color> (names)
<color> (#rrggbb or #rgb Notation)
<color> (rgb(r,g,b) Notation)
<color> (system colors)
transparent
<color> (rgba(r,g,b,a) Notation)
<color> (hsl(h,s,l) Notation)
<color> (hsla(h,s,l,a) Notation)
auto
inherit
initial
Written by in: Web Development | Tags: , ,
Mar
20
2009
--

Good news or Bad news, IE8 is here

To those who worked hard on getting IE8 released on schedule, congratulations! In the same time we feel sorry to those who care about website compatibility, this means you have one more IE to hack on. Maybe this is the way how Microsoft helps to create jobs in the crisis, thanks! Anyway here's some critics from my own opinion. Firstly it took over 15 minutes to upgrade my IE8 RC1 to IE8 with two restarts. If you haven't noticed IE8 by default is not backward compatible to its predecessors. A good example is the 'opacity' in css, to get your page displayed correctly in IE8 you need to. Either in the <head> tag put,
or write something like this in the CSS, 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
However this may break PNG images with alpha channel from displaying properly. Yes, another PNG issue, :-< Read more on Bb RealTech If you want find out more about difference IE8 has to offer, please check out CSS3.info Enjoy hacking another IE!
Written by in: Web Development | Tags: , ,

Copyright Orite Group Pty Ltd | Powered by WordPress | Theme: Aeros 2.0

https://www.runthemusic.com/