Jul
08
2009
3

FREE Instant Email Standard Test Tool

Orite has created an online tool to emulate HTML/CSS rendering capacity of various Email clients. It references the Email CSS support Guide from Campaign Monitor, and utilizing the email-standards.org Email ACID test page as the example. You may paste in your own email template to test in.

Please note, this tool only provides a brief demonstration, by no means to be the exact reflection of how email clients show emails. Please remember this tool highly relies on the browsers capability as well, so be sure to use a standard compliant browsers. For more solid tests please try Litmus Email Testing or the Campaign Monitor Email Testing tool. If you want to convert any external CSS to inline style, Inline Styler and Emogrifier may come to help. Here goes the FREE tool, post your comments.

Email Client:

Images:

Currently tested under FF3/3.5, Safari4, Chrome2/3, IE7/8, Opera9.6

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
Mar
20
2009
0

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,
1
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
or write something like this in the CSS,
1
-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!

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