Art is like masturbation.

Design is like sex.

 
Оптимизация на CSS

Преди да започна темата, искам да ви споделя една крилата фраза:

"Code is Poetry"

и за англоговорящите тази тема: "Art and Computer Programming"
обърнете внимание на Richard Stallman едно добро мнение...
( темата е стартирана отдавна - още през 2005 година от "John Littler" )

Писането на CSS, както и xHTML също е изкуство (често аз оприличавам CSS с танц, нямам идея защо... не съм изкусен танцьор, но...) и много често ние всички, както в живота и характера си, така и в работата си, имаме собствен стил и методика. В темата няма да разисквам и налагам мой стил, а по-скоро дам няколко съвета за хората, които искат да оптимизират CSS кода, като по този начин постигнем няколко предимства:

1. бързо зареждане на страницата (макар това във века на Интернет-а да звучи малко нелепо, но при сайтовете с много посещения има значение и малкият детайл)
2. подреден, изчистен и "изцяло" валидиран код

Това са двете основни причини да напиша тази тема.

За щастие има някои трикове, които бихте могли да приложите за драстично намаляване на размера на CSS файловете, както и спестите много писане. Нека опознаем някои от тях...

Един често използван селектор с пет елемента е именно "фон". Чрез някои хитринки можем да си спестим доста килобайти... Ето и петте елемента с различните възможни стойности:

 background-color: color | transparent | inherit
 background-image: uri | none | inherit
 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
 background-attachment: scroll | fixed | inherit 
 background-position: [ percentage | length | left | center | right ] 
 [ percentage | length | top | center | bottom ]? ] | 
 [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 

 

(повече можете да откриете в портала на w3schools, вижте този линк: CSS Background )
Как можете да декларирате, всички елементи само в един ред използвайки background вижте:

background: [ background-color || background-image || background-repeat 
|| background-attachment || background-position ] | inherit

 

Ако искаме да:

  • зададем син цвят за фон на елемента
  • поставим изображението mecho puh за фон
  • наслагаме mecho puh по вертикала
  • ограничим скролирането на изображението в елемента
  • позиционираме мечо в горния ляв ъгъл

ние обикновено пишем следните редове код:

 

.teddyBear {  
background-color: blue; 
background-image: url("mecho_puh.jpg"); 
background-repeat: repeat-y;    
background-attachment: fixed;   
background-position: left top; 
} 

 

Всички тези редова могат да се редуцират до един ред, което ще доведе до облекчение на китките ви (ще пише доста по-малко) и малко трафик за потребителя:

 

.teddyBear {
 background: blue url("teddy.jpg") repeat-y fixed left top;  
 }

 

Красота!

Сега нека разгледаме и стойностите по подразбиране, които се взимат при липса на конкретна дефиниция/правило в CSS:

background-color:
transparent
background-image:
none
background-repeat:
repeat
background-attachment:
scroll
background-position:
0% 0%

Не напразно Ви предоставям тази информация, защото ако вземем следните два реда:

 

background: url("teddy.jpg") fixed; 
background: transparent url("teddy.jpg") repeat fixed 0% 0%; 

 

Всъщност, в логически смисъл са едно и също... и ефектът ще бъде един и същи при употребата им, с тази разлика, че в първия ред си спестявате 1. писане 2. килобайти 3. естетика за дизайнерското око

Погледнато, чрез различните възможности, за да задавате рамки на елемент, има четири различни начина:

  • можете да зададете ширината, стила или цвета на всички 4 рамки наведнъж
  • можете да зададете ширината, стила или цвета на индивидуална (част от) рамка
  • можете да зададете ширината, стила и цвета на всички 4 рамки наведнъж
  • можете да зададете ширината, стила и цвета на 1 рамка

като, че ли стана каша, но ето какво имам предвид в детайли:

 

border-top-width: border-width | inherit
border-right-width: border-width | inherit
border-bottom-width: border-width | inherit
border-left-width: border-width | inherit

border-top-style: border-style | inherit
border-right-style: border-style | inherit
border-bottom-style: border-style | inherit
border-left-style: border-style | inherit

border-top-color: color | transparent | inherit
border-right-color: color | transparent | inherit
border-bottom-color: color | transparent | inherit
border-left-color: color | transparent | inherit

 

Използвайки само border-width, border-color и border-style ние можем да си спестим доста редове и то напълно излишни...вижте това:

 

border-width: border-width | inherit
border-style: border-style | inherit
border-color: color | transparent | inherit

 

Ето е и пример в действие:

 

.BearBorder
{
border-width: 10px;
border-style: dashed;
border-color: red;
}

 

Смятам, че по този начин спестяваме време и байтове – и в двата случая печелят нашите потребители.

В предходния пример правилата ще се приложат за всичките (4) рамки/бордери, но това много лесно може да се промени и да зададете правило за конкретна рамка на обект (без значение дали става въпрос за рамка или някой друг обект изброяването ВИНАГИ е по часовник)
Например:

 

 // Горе на точки, дясно прекъсната линия, долу вдлъбнато, ляво  "рамка":
border-style: dotted dashed groove ridge;
 // Горе & долу dotted, ляво & дясно прекъсната линия  
border-style: dotted dashed; 

 

Така прилагаме стил за 1 или повече страни на рамка, но можем да приложим всички елементи със съответните му стойности и за една страна ето и пример: (т.е. да стилизирам еизцяло само 1 страна)

 

border-top: [ border-width || border-style || border-color ] | inherit
border-right: [ border-width || border-style || border-color ] | inherit
border-bottom: [ border-width || border-style || border-color ] | inherit
border-left: [ border-width || border-style || border-color ] | inherit

 

Ето и практично приложение:

 

.redBottomBearBorder
{
 border-bottom: 10px dashed red;
}

 

Както при "фон" и тук имаме стойности, които се взимат по подразбиране и не е лошо да се знаят, за да не се пишат излишни (байтове) редове код:

border-width:
medium
border-style:
none
border-color:
според браузера; най-често black

Също така можете да дефинирате width, colour, и/или style за всичките 4 граници само в един ред код.

 

border: [ border-width || border-style || border-color ] | inherit

 

Действащ пример:

 

.thickDashedRedBorder
{
 border: 10px dashed red;
}

 

Напомням, че ако липсва някоя от трите стойности, ВИНАГИ се взимат под внимание тези, които са по подразбиране!

Обикновено, за да дефинираме цвят използваме 6 цифрен шестнадесетичен код. Например:

 

color: #ff0000; // червено
color: #000000; // черно

 

Ако се повтарят някои от 3-те чифта цифри, вие можете да ги изпуснете последните:

 

color: #f00; // червено
color: #000; // черно

 

Така получавате същия резултат, а спестявате писане и "тежест".

Аз препоръчвам използването на RGB в десетичен код или проценти:
(според някои източници, а и моя опит показва, че зарежда по-бързо за "сложните цветове")

 

color: rgb(255,0,0); // червено
color: rgb(0,0,0); // черно
color: rgb(100%, 0%, 0%); // червено
color: rgb(0%, 0%, 0%); // черно

 

Имаме и друга възможност, която в определени случаи е невероятно бърза, лесна и "изтънчена" – използването на английските имена на определен брой цветове:

 

color: red;
color: black;

 

Ето и списък на цветовете, които можете да използвате с английските им имена.

Вие можете да използвате всички тези цветове във всички селектори, които използват цвят включително color, background-color и др..

В CSS са налични 6 елемента за селектора Font:

 

font-style: normal | italic | oblique | inherit
font-variant: normal | small-caps | inherit
font-weight: normal | bold | bolder | lighter | 100, 200 ... 900 | inherit
font-size: absolute-size | relative-size | length | percentage | inherit
line-height: normal | number | length | percentage | inherit
font-family: [ family-name | generic-family ] 
[, family-name | generic-family]* ] | inherit

 

Ето и пример, в който стилизираме P (параграф, абзац)

p{
 font-style: normal;
 font-variant: small-caps;
 font-weight: bold;
 font-size: 1.2em;
 line-height: 130%;
 font-family: Times New Roman, serif;
}

 

Както при останалите селектори CSS дава възможност да дефинирате всички елементи в един ред:

 

font: [ font-style || font-variant || font-weight ]? 
font-size [ / line-height ]? font-family> ]

 

Ето и съкратеният вариант на примера за оформлението на параграф:

 

p{
  font: normal small-caps bold 1.2em/130% Times New Roman, serif;
}

 

Когато използвате селектора Font, е задължително да дефинирате font-size и font-family. Всички останали елементи са със стойности по подразбиране – normal

Таговете в хHTML за списък са: ul, ol, и dl за тях съответстват следните селектори в CSS:

 

list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | 
upper-roman | lower-greek | lower-latin | upper-latin | armenian | 
georgian | lower-alpha | upper-alpha | none | inherit
list-style-position: inside | outside | inherit
list-style-image: uri | none | inherit

 

Използвайки CSS, ние можем да заменим първоначалния символ (булет) в списък с определено изображение и да зададем да бъде кръгче при отсъствие на изображението и позицията на булет-а или изображението:

 

list-style-type: circle;
list-style-position: inside;
list-style-image: url("bullet.png");

 

Естествено, можем да изпишем стойностите на елементите в един ред:

 


list-style: [ list-style-type || list-style-position || 
list-style-image ] | inherit

 

Горният пример в един ред:

 

list-style: circle inside url("bullet.png");

 

В CSS има стойности по подразбиране за различните елементи от селекторите за списък:

list-style-type:
disc
list-style-position:
outside
list-style-image:
none

Навярно знаем, че margin-ите са в "боксов" модел, т.е. имаме четири страни, на които можем да прилагаме различни стойности за селектора margin:

 

margin-top: margin-width | inherit
margin-right: margin-width | inherit
margin-bottom: margin-width | inherit
margin-left: margin-width | inherit

 

Ако искаме да съкратим писането, ние можем да дефинираме за всички страни само чрез един ред. Например, ако желаете да зададете 10 пиксела margin за всичките четири страни:

 

margin: 10px;

 

Ако искаме да зададем 10 пиксела за горе и 20 пиксела за долу:

 

margin: 10px 20px;

 

Задаваме 10 пиксела горе, 20 пиксела дясно и ляво, 30 за долу:

 

margin: 10px 20px 30px;

 

(забележете, че дясно и ляво са обединени)
Можем да зададем и на всичките четири страни едновременно (в един ред) - 10 горе, 20 дясно, 30 долу, 40 ляво:

 

margin: 10px 20px 30px 40px;

 

Трябва да знаем, че посоките се взимат по подразбиране по часовниковата стрелка, т.е. 12 часа е ГОРЕ, 15 часа – ДЯСНО, 18 часа – ДОЛУ и 21 часа – ЛЯВО.

Padding-ите се "третират" по абсолютно същия начин, както и margin`s:

 

.myBox{
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: 3em;
  padding-left: 4em;
}

 

трансформираме в:

 

.myBox{
  padding: 1em 2em 3em 4em;
}

 

НЕ винаги тези съвети биха били от значение! Има ситуации, в които оптимизирайки кода, изпускате стойности, елементи и т.н., които някои браузери считат за !important

Както самото заглавие казва "Оптимизацията е въпрос на личен/собствен стил", не винаги е възможна, а и нужна..., но знае ли човек :) По-добре е да имаш знания и опита/рутината, за да вършиш работата си по възможно най-добрия начин така, че утре да не те е срам да кажеш, че си правил даден сайт!? :)

тази тема трябва да има продължение...

Лекции и Статии
 
Аз видях, погледни през моите очи
 фотогалерия на кристалин чавдаров  пейзажи от цяла българия  Снимки на българската природа - планини, море, забележителности. Фотогалерия и фотобанка.  фотография, пейзажи, снимки, сток, България, природа, забележителности, изкуство, тракове, пътешествия, истории, разкази, услуги  снимки от сватби, сватбен фотограф, сватбено заснемане, сватбена фотография  Информация относно фотозаснемането на вашата сватба от сватбен фотограф
Чурилик
Себеизлеяния
"Аз мога - тук и сега"