Category Archives: CSS

css категория

CSS само за Chrome и Safari

За да изпилзвате CSS, който желаете да важи само за  Webkit браузърите(Chrome and Safari) напишете следния код:

@media screen and (-webkit-min-device-pixel-ratio:0){
#selector{
height: 20px;
margin-top: 5px;
}
}

Кодът в червено са нормални CSS редове. Например ако искате да зададете височина и дължина за елемент с id = “my-element”, вместо червения текст поставете:

#my-element{

width:200px;

height:100px;

}


CSS само за Mozilla Firefox

Въпреки че Mozilla Firefox е един от най-добрите браузъри, понякога се случва дадени CSS правила да не важат за него. Затова в следващия ред код ще Ви покажа как да задавате CSS правила, които ще бъдат отчитани само от браузъра Mozilla Firefox.


@-moz-document url-prefix() {
.selector {
color:lime;
}
}

Кодът в червено са нормални CSS редове. Например ако искате да зададете височина и дължина за елемент с id = “my-element”, вместо червения текст поставете:

#my-element{

width:200px;

height:100px;

}

Кодът се разпознава във всички версии на Mozilla Firefox.

CSS само за Internet Explorer – IE

От всички известни браузъри ми е най-неприятно да програмирам за IE, не за друго, а само заради факта, че някак си единствено Microsoft се “цепят от колектива”. За това е много важно за всеки web програмист да знае, как може да пише CSS правила единствено и само за IE, без това да касае работата на страниците в другите браузъри. Аз лично препоръчвам да си направите отделен .css файл само за форматирането в IE. Например може да го кръстите IE-style.css. След което може да напишете в <head></head> частта от Вашата страница следния код:

<!–

[if IE]>
<link rel=”stylesheet” type=”text/css” href=”css/IE-login.css” />
<![endif]

–>

Този код ще бъде разпознат само и единствено от IE и той ще се изпълнява само за този браузър. Така написан кода ще се изпълнява за всички версии на IE. Ако искате вашия CSS да се изпълнява само за определена версия на IE, разгледайте този пост How To Create an IE-Only Stylesheet.

В посочения пост има и доста хакове, които могат да Ви помогнат в различни ситуации.

CSS само за Opera Browser

Много често се случва определени правила зададени чрез CSS да не важат за  браузъра Opara. Това е доста досадно за един опитен web програмист искащ всичко в страниците му да работи както трябва във всички по-известни браузъри. В следващия ред код ще Ви покажа как да задавате CSS правила които ще бъдат отчитани само от браузъра Opera.

@media all and (-webkit-min-device-pixel-ratio:10000), 
not all and (-webkit-min-device-pixel-ratio:0) {        
#element {
css rule
}
}

Кодът в червено са нормални CSS редове. Например ако искате да зададете височина и дължина за елемент с id = “my-element”, вместо червения текст поставете:

#my-element{

width:200px;

height:100px;

}

Кодът се разпознава и в по-старите версии на Opera.

Центриране на таблица с CSS

Понякога таблиците използвани в web страниците имат нужда от центриране в самите страници. Старият начин да се направи това беше:

 <table align="center"> </table>

Но атрибута “align” вече е премахнат от новите стандарти за HTML.

Ако се опитате да центрирате таблицата чрез използването на CSS “text-align: center;” както в случая:

 <table style="text-align:center;">

или пък чрез:

 <div style="text-align:center;"> <table> </table> </div>

няма да имате успех, таблицата ще продължава да е центрирана от ляво на страницата, единствено нейното съдържание ще бъде центрирано спрямо нея.

Ако се питате защо се получава така, ами много просто: защото свойството “text-align” оказва въздействие на вътрешното съдържание на елемента за който е зададено, а не за самият елемент спрямо неговия родител.

Ето един начин да направите центрирана таблица в CSS кода.
 table.center{
margin-left:auto;
margin-right:auto;
}

Разбира се Вашия HTML трябва да изглежда така:

 <table class="center"> </table>

Ако се използва този случай браузъри като  Mozilla и Opera ще центрират таблицата, но за съжаление Internet Explorer версиите от 5.5 и нагоре, ще се нуждаят от допълнителен CSS код:

 body {text-align:center;}
Има и друг начин да направите центрирането на таблицата.

Това става чрез използването на проценти и на CSS свойството “width”

 table.center { 
width:70%;
margin-left:15%;
margin-right:15%;
}
Може да използвате и друг CSS трик

Ако искате Вашата таблица да бъде с точно фиксиране дължина (100px) , използвайте следния CSS код:

 div.container{
width:98%;
margin:1%;
}
table.center{
text-align:center;
margin-left:auto;
margin-right:auto;
width:100px;
}
tr,td{
text-align:left;
}

“text-align: center” се използва специално за Internet Explorer, който няма да работи правилно без това свойство. За съжаление в този случай “text-align: center” ще центрира съдържанието на всички клетки в таблицата, но ние предотвратяваме това като настройваме елементите “tr” и “td” да бъдат подравнени в ляво.

Вашия HTML трябва да бъде като този:

 <div class="container">
<table class="center">
</table>
</div>

Надявам се да съм бил полезен при центрирането на Вашите таблици.