Wednesday, 24 February 2010

IE8 compatibility

IE8 doesn't support many standard rules of W3C-CSS3. One of them is "background-origin" attribute, this attribute is used to define the origin of  background-image, where it takes one value of (border, padding or content).
• IE up to version 7 defaults to background-origin: border;
• IE 8 default behavior is background-origin: padding;

But IE8 behaves like IE7 untill you tell him to behave like himself "IE8", that by adding the following meta tag to your HTML layout:
<meta http-equiv="X-UA-Compatible" content="IE=8" />


IE8, before adding meta tag

IE8, after adding meta tag to behave like IE8
The following selectors and attributes are not supported also in IE: and there are still more!!!
:root { sRules }
:nth-child() { sRules }
:nth-last-child() { sRules }
:nth-of-type() { sRules }
:nth-last-of-type() { sRules }
:last-child { sRules }
:first-of-type { sRules }
:last-of-type { sRules }
:only-child { sRules }
:only-of-type { sRules }
:empty { sRules }
:target { sRules }
:not(X) { sRules }
:enabled { sRules }
:disabled { sRules }
:checked { sRules }
:indeterminate { sRules }
:default { sRules }
:valid { sRules }
:invalid { sRules }
:in-range { sRules }
:out-of-range { sRules }
:required { sRules }
:optional { sRules }
:read-only { sRules }
:read-write { sRules }

::before { sRules }
::after { sRules }
::first-letter { sRules }
::first-line { sRules }
::selection { sRules }
::value { sRules }
::choices { sRules }
::repeat-item { sRules }
::repeat-index { sRules }

{ color-profile : sProfile }
{ rendering-intent : sIntent }
{ background : sBackground1,sBackground2, etc. }
{ background-clip : sClip }
{ background-origin : sOrigin }
{ background-break : sBreak }
{ background-size : sSize }

{ font-effect : sEffect }
{ font-emphasize : sEmphasize }
{ font-size-adjust : sSizeAdjust }
{ font-smooth : sSmooth }
{ font-stretch : sStretch }
{ hanging-punctuation : sHangingPunctuation }
{ punctuation-trim : sTrim }

{ border-break : sBreak }
{ border-image : sImage }
{ border-radius : sRadius }
{ box-shadow : sShadow }

Friday, 12 February 2010

DIVs-tree size-measure and offset-calculation recurcive-algorithm, O(n)

<div> Tree size-measure and offset-calculation recurcive-algorithm, O(n) complexity

I have a tree of <div>s and want a rendering algorithm to calculate total size and detailed offests, so, each <div> will implement the following recursive algorithm.

<div style="block">

   <div style="block"><div style="inline"></div><div style="inline"></div><div style="inline"></div></div>
   <div style="block"><div style="inline"></div><div style="inline"></div><div style="inline"></div></div>
   <div style="block"><div style="inline"></div><div style="inline"></div><div style="inline"></div></div>
</div>


Measure Algorithm:
. I'm <div> object, that is the single input to the algorithm
. I have mySize of (X,Y) and myOffset of (x,y)
. Initilaize a runningOffset to equal myOffset
. Initialize runningInnerSize with (0,0)
. Loop through my children:
    . If child flow is INLINE, then, set child offset to runningOffset
    . If child flow is BLOCK, then, set child offset as follows:
        . childOffset.x = myOffset.x
        . childOffset.y = myOffset.y + runningInnserSize.height
    . Calculate childSize by recursive call to Measure Algorithm
        . childSize = Measure Algorithm
    . If child flow is INLINE:
        . Increment runningInnerSize.width by childSize.width
        . Keep runningInnerSize.height unchanged if it is longer than childSize.height
           . else  runningInnerSize.height=childSize.height
        . Prepare runningOffset for next sibling "next child"
           . runningOffset.x increment by childSize.width
    . If child flow is BLOCK:
        . Increment runningInnerSize.height by childSize.height

        . Keep runningInnerSize.width unchanged if it is longer than childSize.width
           . else runningInnerSize.width = childSize.width
        . Prepare runningOffset for next sibling "next child"
            . runningOffset.x increment by childSize.width
    . Change my size to srround runningInnerSize
    . Keep track of runningInnerSize for latter use

    . Return my size to the caller
. End of Algorithm

Wednesday, 10 February 2010

Lambada as Predicate method, c#3.5

{
    List<string> ZoneList = new List();
.
.
.
    for (int i = 0; i > 10; i++)

    {
       ZoneList.Add(i.ToString());
    }
  
.
.
.
    if (ZoneList.Exists(listItem => listItem != notExistedWord))

    {
       ZoneList.Add(notExistedWord);
    }
}

ZoneList.Exists(Predicate<string> match) is a List method that needs predicate-method as input paramter, the Predicate-method must has a string input paramter and Boolean output parameter, the string input paramter will be used to carry one by one item of the List items for being proccessed inside predicate-method, alternativly, we can use lambada expression listItem => listItem==searchedWord, where left side of => is concidered input for the right side, this expression can be assigned to delegate just like that:

delegate Boolean SearchDelegate(string listItem);
SearchDelegate exists = listItem => listItem==searchedWord

searchedWord is a variable that must be explicitly defined before lambada is defined, searchedWord will be stored for use even if it goes out of scope, this is one rule of many lambada-variable-scope rules.