Reset.css

HTML & CSS
1

Hi


*{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

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

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

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.


*[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.

5

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

6

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.

7

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.


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. :smiley:

8

Thanks for links & for clarification

It’s in Arabic.