SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: reset.css

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    reset.css

    Hi
    Code:
    *{border:none;padding:0;margin:0;direction:rtl}
    
    abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {background:transparent;border:0 none;margin:0;padding:0;border:0;outline:0;vertical-align:top}
    ol, ul, li {float:right; list-style:none}
    blockquote, q {quotes:none}
    table, table td {padding:0;border:none;border-collapse:collapse}
    img {vertical-align:top;display:inline; border:none; outline:none}
    embed {vertical-align:top}
    input{outline:none; font-family:Tahoma; font-size:11px; border:none}
    a{text-decoration:none; color:#ad18a5}
    a:focus{outline:none}
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
        display: block;
    }
    I use this reset with my site but find that it causes lots of problems...
    especially *{direction:rtl}
    I don't know if I use this property correctly or not?
    Thank you

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Unless your text and language is supposed to read from right-to-left you won't want RTL but left-to-right LTR for the direction.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hm, to be honest, that looks like a pretty dreadful reset to me, so I'd advise against using it. As Robert said, rtl is for language like Arabic. And removing focus styles like this is not a good practice. And setting all list elements to float: right? That's weird, and unlikely to help you much, I'd say.

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    And removing focus styles like this is not a good practice. And setting all list elements to float: right? That's weird, and unlikely to help you much, I'd say.
    Sorry but I don't get it yet. Do you mean that I should not use a:focus{outline:none} ???
    I remove the float property thanks for advice

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tulip-flower View Post
    Do you mean that I should not use a:focus{outline:none} ?
    Yes, it's a really bad thing to do ... unless you reset the focus to something else further down the style sheet. Focus has an important purpose, especially for those not using a mouse. It lets the user know which is the currently active element, such as a link. By default, browsers tend to put an outline around an element with focus, which can look a bit ugly, but rather than just remove all focus, change it to something else, like a different outline color, or perhaps a font color or background color. I tend to give the same styles to the :focus state as to the :hover state. E.g.

    Code:
    a {color: blue;}
    a:focus {outline: none;}
    a:hover, a:focus {color: red;}
    For maximum clarity, though, it would probably be better to give the :focus state a different color from the :hover state.

    Edit:

    Two replies for the price of one.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As fas as I understand you shouldn't be using direction:rtl in your css at all on normal elements but only on related bidi elements (to qualifying the dir attribute) as direction should be controlled by the html so that it renders correctly even without css applied.
    e.g.
    Code:
    *[dir="rtl"] { direction: rtl; unicode-bidi: embed }

    Read here for a more through discussion as I am really unfamiliar with all the ramifications of rtl coding.

    The CSS specification actually recommends the use of dedicated bidi markup, and says that conforming HTML user agents may ignore CSS bidi properties. This implies that if you rely on CSS for bidirectional behaviour in HTML or XHTML, you may not always get the results you expected.
    Note that "*{direction:rtl}" would kill any inheritance on any sections changed to ltr so is not a good idea.

    I would also remove "*{border:none;padding:0;margin:0}" and applies those in the reset to the relevant elements rather than hammering every single element whether it likes it or not. There are plenty of reset examples around (that don;t use the universal selector) but don;t go overboard with them. Just modify then to the page in hand and only use what you need.


    Edit:


    I just assumed you were creating a right to left language site but as others have said above if your site is not Arabic (or one of the other rtl languages) then you don't need rtl at all.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    There are plenty of reset examples around (that don;t use the universal selector) but don;t go overboard with them. Just modify then to the page in hand and only use what you need.
    Thanks for links & for clarification
    Quote Originally Posted by Paul O'B View Post
    Edit:


    I just assumed you were creating a right to left language site but as others have said above if your site is not Arabic (or one of the other rtl languages) then you don't need rtl at all.
    It's in Arabic.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Do you mean that I should not use a:focus{outline:none} ???
    You should only remove it if you have replaced it with some other visual clue that activates on focus (usually something similar to the hover state). Keyboard users who tab through the page use the focus outlines to see where they are on the page. Without the outline they have no clue and cannot use the site.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •