• 2008-11-24

    Some web standard we should know - [Web Standard]

    # Web Standard

    1) Strict DOCTYPE
    template:

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <title>An XHTML 1.0 Strict standard template</title>
        <meta http-equiv="content-type"
            content="text/html;charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
    </head>

    <body>

         <p>… Your HTML content here …</p>

    </body>
    </html>

    2) Character set &amp; encoding characters
    In <head> section, the very first thing should be the declaration of our character set.
    e.g.1 using UTF-8 here, we need to move it close to <head> and above another stuff on the current web page. So that the browser knows that character set it's dealing with before it starts reading any content at all.
    e.g.2 we need to convert "&" to "&amp;" in html code.

    <head>
    <meta http-equiv="Content-Type" content="text/html;UTF-8" />
    <title>cats & other stuff</title>

    3) Proper indentation
    Indentation has no bearing on how the page is rendered, but it has a huge effect on the readability of the code. Standard procedure is to indent one tab(or a few spaces ) when you are starting a new element that is a child element of the tag above it. Then move back in a tab when you are closing that element.

    e.g.
    <ul>
      <li></li>
      <li>
        <a>...</a>
        <div>...</div>
      </li>
    </ul>

    Indentation rules are far from set in stone. Nicely indented markup goes a long way in beautifying the code and making it easy to read and jump around in.

    4) Keep CSS and Javascript external
    Keeping CSS files separate means that future pages can link to them and use the same code, so changing the design on mutiple pages becomes easy.

    5) Nest tags properly
    e.g.
    Blocks should not go inside inline elements. It's liking crossing the streams in Ghostbusters.

    6) Eliminate unnecessary divs

    7) Use better naming conventions
    Good class and id names are things like "mainNav", "subNav", "sidebar", things that describe the content they contain. Bad class and id names are things that describe the design, like " bigBoldHeader".

    8) Leave typography to the CSS
    For better, future extensibility, we should abstract typographic choices to the CSS. We can easily target this text and turn it to all-caps with {text-transform: upppercase}. This means that down the road, if that all-caps look loses its charm, we can make one little change in the CSS to change it to regular lowercase text.
    e.g.
    <a href="#">HOME</a>
    should be in CSS
    a {
      transform: uppercase;
    }

    9) Class/id the <body>
    This means apply a class to the body, like <body class="blogLayout">. It will allow us to target both the "mainContent" and "sidebar" divs uniquely without the need for fancy new names or class additions.
    Having unique class and id names for the body is very powerful and has many more uses than just for alternate layouts. Because every bit of page content lies in the body tag, we can uniquely target anything on any page with that hook; particularty useful for things like navigation and indicating current navigation, since we will know exactly what page you are on with that unique body class.

    10) Validate
    King of goes without saying, but we should run your code through the ol'validator machine to pick up small mistake. Sometimes the mistakes will have no bearing on how the page renders, but some mistakes certainly will. Validated code is certain to outline non-validated code.

    11) Logical ordering
    If it is at all possible, keeping the sections of your website in a logical order is best.

    Reference: smashingmagazine

    /*---- Pretty programming young lady ----*/

    __Cora__

     

    Tag：W3C standard
    coracorababy 发表于06:57:17 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • 2008-11-12

    td wanna get hovering in IE6 :J - [UI development]

    #CSS
    1) hover selector fix for ie6
    IE6 only supports the :hover pseudo-class on anchor() tags.
    There are at least 2 solutions.
    {1} using javascript
    {2} using the csshover behavior(developed by Peter Nederlof http://www.xs4all.nl/~peterned/).
    IE supports so called behaviors; .htc or .hta files that can be attached to specific elements using css making it possible to let these elements behave in a special way.
    Once download the csshover.htc file, simply add one line css code to the stylesheet.

    body {
      behavior: url('csshover.htc');
    }


    This will look parse your stylesheet and search for all :hover rules and replace the rule with a scripted event. It enables to use standard code for IE7 and Firefox while using this to apply a "fix" to IE6.

    Reference:     http://www.danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector

    2) css transition and css animation
    http://ejohn.org/blog/css-animations-and-javascript/

    3) QQ music 之用户体验
    一直没有用过QQ music的download功能, 今天突然听到Lenka 的 "the Slow", 相当极品之好听, 想share给小鬼. 当然毫不犹豫的按下download tab, 结果却并非想象中的开始询问保存地址, 而是说, 你不是绿钻, 不能下载正版music, 但素~~~, 腾讯聪明的地方是, 在旁边附加了一个链接, "soso 搜索" 下? 这是当然巧妙的避开了正版的版权争夺战, 而同时, 又让使用者越发的喜爱这个心思细密, 事事处理周到的小企鹅.
    也许, 我们用QQ music在线聆听的那些也并非真正意义上的正版, 可是, 我们却被告知了一个事实是, 我们是正版的受益者, 和Google music相比看来, 同样都是聆听正版, 同样免费, 而一个需付费下载, 一个免费下载, 同时的, 一个歌曲数目的储存量之大可以满足各个level听众的喜好, 一个却只有稀少的国语, 和涵盖不全的专辑数目. 你, 更喜欢哪个?
    我是小狐狸, 当然稀饭QQ music多一点喽 =J

    /*---- Pretty programming young lady ----*/

    __Cora__

    Tag：hover IE6 javascript userExperience
    coracorababy 发表于18:51:35 | 阅读全文 | 评论 1 | 编辑 | 分享 0

  • 2008-11-11

    It's an image which should not own background position - [UI development]

    #CCS
    1) IE 6 ignores background-position with a PNG image
    If a selector's background image is a PNG image, ie6 will probabley ignore its background-position property.
    e.g.

    #seletor {
      background: url(images/png_bg.png) no-repeat;
      _background-image: expression('none');
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/png_bg.png', sizingMethod='crop');
    }


    A filter is not a background-image. It changes the display of an object and is not designed for positioning. The CSS property 'background-position' does not affect the MS-proprietary 'filter'-extension in any way.

    So the background-position property in IE6 never works.
     

    /*---- Pretty programming young lady ----*/

    __Cora__

    Tag：background position IE6 PNG
    coracorababy 发表于17:18:59 | 阅读全文 | 评论 1 | 编辑 | 分享 0

  • 2008-11-04

    Hack, hack, better not to use it! - [UI development]

    #CSS
    1) height in IE6
    If a division owns more than one floated children, we cannot only give its overflow to "hidden", but also set the width for it, so ie6 can recognize the division's height, and make it fit its content height.
    e.g.

    #box {
      width: 300px;
      overflow: hidden;
    }
    #box .item {
      float: left;
      width: 20px;
    }


    2) border of tr in IE
    IE6 does not acknowledge borders for the 'tr' element. The solution is to assign the collapse value for the border-collapse property to get rid of any of the spacing between td's on a given table. Then add your preferred border style for all of the td's within that tr.

    table {
      border-collapse: collapse;
    }
    table td {
      border-bottom: 1px solid #ccc;
    }


    3) hack for firefox only
    I like the introduction on top of the bug fixing page.
    "Before you hack anything, make sure you're hacking because of a browser bug, not because you failed to understand how particular CSS feature should work."

    {1. Firefox 2.0 or older}

    #hackme, x:-moz-and-link {
      style for Firefox 2.0 here;
    }
    #hackme, x:-moz-and-link, x:default {
      restore styles for Firefox 3.0 and newer;
    }


    This hack will apply rules to #hackme element. You can change the first selector (#hackme) in each rule to anything else, but don't touch the ones with x.

    e.g.
    For 9 versions support for inline-block in Gecko was FUBAR. The closet equivalent wouldn't respect line-height.
    The workaround:

    #menu a {
      display: inline-block;
      line-height: 2em;
    }
    #menu a, x:-moz-any-link {
      display: -moz-inline-block;
      padding-top: 0.5em;
    }
    #menu a, x:-moz-any-link, x:default {
      display: inline-block;
      padding-top: auto;
    }


    {2.Firefox 1.0 or older}

    #hackme, x:-moz-any-link {
      styles for Firefox 1.0 here;
    }
    #hackme, x:-moz-any-link, x:only-child {
      restore normal styles for newer versions;
    }


    {3.How do these work?}
    CSS error handling rules require browsers to drop entire rule if any of the selectors is not recognized. :-moz-any-link is a selector private to Gecko, so all non-Gecko browsers see it as parse error. :default has been added in Firefox 3.0(Gecko 1.9), :only-child has been added in Firefox 1.5, so they're unknown to earlier versions of Firefox/Gecko.

    # Javascript
    1) png in IE6
    when using ifixpng to fix the display bug in IE6, it may cause some problem when a png img is on a page that owns a scroll bar no matter who create the scrollbar, both the browser and the custom javascript.


    I will never be, I will never be tall, no
    And I will never be, never ever be sure of it all
    Oh, why is the world so cruel to me
    When all, all I ever want to be is anything I'm not
    Gimme a break, a little escape
    I am so tired of being me
    I wanna be free, I wanna be new and different
    Anything I'm not
    I'm not
    I will never be, I will never be you, no
    I will always be, I will always be me, that I know
    But oh, even though I'm happy being me
    I want to get away from all this harsh reality, oh
    Gimme a break, a little escape
    I am so tired of being me
    I wanna be free, I wanna be new and different
    Anything I'm not
    Yeah, gimme a break, a little escape
    I am so tired of being me
    I wanna be free, I wanna be new and different
    Anything I'm not
    Anything I'm not
    Oh, anything I'm not
    Gimme a break, a little escape
    I am so tired of being me
    I wanna be free, I wanna be new and different
    Anything I'm not
    Yeah, gimme a break, a little escape
    I am so tired of being me
    I wanna be free, I wanna be new and different
    Anything I'm not
    Anything I'm not
    Anything I'm not
    Anything I'm not
    Anything I'm not


    Trouble is a friend
    Trouble will find you no matter where you go, oh oh
    No matter if you're fast, no matter if you're slow, oh oh
    The eye of the storm wanna cry in the morn, oh oh
    You're fine for a while but you start to lose control
    He's there in the dark, he's there in my heart
    He waits in the wings, he's gotta play a part
    Trouble is a friend, yeah trouble is a friend of mine
    Ahh..
    And no matter what I feed him he always seems to grow, oh oh
    He sees what I see and he knows what I know, oh oh
    So don't forget as you ease on down my road
    He's there in the dark, he's there in my heart
    He waits in the wings, he's gotta play a part
    Trouble is a friend, yeah trouble is a friend of mine
    So don't be alarmed if he takes you by the arm
    I roll down the window, I'm a sucker for his charm
    Trouble is a friend, yeah trouble is a friend of mine
    Ahh..
    How I hate the way he makes me feel
    And how I try to make him leave
    I try, oh oh I try
    But he's there in the dark, he's there in my heart
    He waits in the wings, he's gotta play a part
    Trouble is a friend, yeah trouble is a friend of mine
    So don't be alarmed if he takes you by the arm
    I roll down the window, I'm a sucker for his charm
    Trouble is a friend, yeah trouble is a friend of mine
    Ahh..
    Ooh..
    Ahh..
    Ooh..

     

    /*---- Pretty programming young lady ----*/

    __Cora__

     

    Tag：CSS IE6 hack mozilla table
    coracorababy 发表于22:39:47 | 阅读全文 | 评论 0 | 编辑 | 分享 0

  • 2008-10-31

    I'm in the middle - [UI development]

    # CSS
    1) dynamical middle column when the left and right sidebars are fixed width

    <html>
    <head>
    <title>dynamical middle column</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
    #lft{width:200px;float:left;background:blue;height:200px;}
    #mid{margin:0px 300px 0px 200px;height:200px;background:yellow;}
    #rgt{width:300px;float:right;background:red;height:200px;}
    </style>
    </head>
    <body>
    <div id="lft"></div>
    <div id="rgt"></div>
    <div id="mid"></div>
    </body>
    </html>

    There's no need to define width for the middle column especially when the demand says that the middle column should be dynamic. Just set the width of the middle column to 100%.

    2) float & block
    if a selector is an inline selector, when make it float, it can be a block selector by default. That means when a selector can float, it owns the block property automatically.

    /*---- Pretty programming young lady ----*/

    __Cora__

    Tag：CSS center float block margin
    coracorababy 发表于11:25:04 | 阅读全文 | 评论 0 | 编辑 | 分享 0
共5页 1 2 3 4 5 下一页 最后一页