êîëîíêàõ èãðàåò - ÑÄ - Ïîòåðÿííûå ñòðàíèöûÑåãîäíÿ çàíèìàëñÿ îïòèìèçàöèåé css ôàéëà äåôîëòíîãî øàáëîíà. ×òî áûëî ïðîäåëàíî:
1. Èçìåíåíà ñòðóêòóðà ôàéëà.
 èñõîäíîì ôàéëå âñå ñåëåêòîðû ðàñïîëàãàëèñü íà îòäåëüíîé ñòðîêå, ïðè÷åì ñâîéñòâà è èõ çíà÷åíèÿ áûëè ïðîïèñàíû íà òîé æå ñòðîêå, ÷òî è ñåëåêòîð.  êà÷åñòâå ðàçäåëèòåëåé áûëè èñïîëüçîâàíû ïðîáåëû, ïðè÷åì â ïîðÿäî÷íîì êîëè÷åñòâå. ß æå ïåðåïèñàë, èñïîëüçóÿ òàáóëÿöèþ äëÿ ðàçìåòêè, è ðàçìåùàÿ ïî îäíîìó ñâîéñòâó/ñåëåêòîðó íà ñòðîêó.
2. Íèæíèé ðåãèñòð.
Âîçìîæíî ýòî ïîêàæåòñÿ íåçíà÷èòåëüíûì, íî âñå æå ïåðåïèñàë êîä â íèæíåì ðåãèñòðå.
3. Óïîðÿäî÷èâàíèå ñâîéñòâ.
Âíóòðè îäíîãî ñåëåêòîðà âñå ñâîéñòâà òåïåðü èäóò â àëôàâèòíîì ïîðÿäêå. Êñòàòè ýòî ïîçâîëèëî îáíàðóæèòü íåêîòîðûå íåêîððåêòíûå ìåñòà â êîäå.
4. Ñîêðàùåíèå êîäîâ öâåòà.
Css ïîçâîëÿåò çàïèñûâàòü êîä öâåòà #rrggbb â ñîêðàùåííîì âàðèàíòå #rgb. Ýòî áûëî èñïîëüçîâàíî ìíîþ, ïîçâîëèâ åùå íåìíîãî óìåíüøèòü ðàçìåð ôàéëà ñòèëåé.
5. Ñîêðàùåííûé âàðèàíò çàïèñè.
Êðîìå öâåòîâ, áûëè ñîêðàùåíû è äðóãèå çíà÷åíèÿ ñâîéñòâ. Íàïðèìåð, padding: 2px 2px; ìîæíî çàïèñàòü êàê padding: 2px; à padding: 0px; ìîæíî çàïèñàòü êàê padding: 0; Îïÿòü æå, ýòî äàëî íåáîëüøîå ñîêðàùåíèå ðàçìåðà ôàéëà.
Íåêîòîðûå íåòî÷íîñòè â èñõîäíîì ôàéëå:
code:
.formtext { padding-left:10px; padding: 5px;
Çäåñü óêàçûâàåò îòñòóï ñëåâà â 10ïèêñåëåé, êîòîðûé çàòåì ïåðåîïðåäåëÿåòñÿ ñëåäóþùèì ñâîéñòâîì, êîòîðîå çàäàåò îòñòóï â 5ïèêñåëåé ñî âñåõ ñòîðîí.
code:
border-top: 1px solid #C6C6C6;
border-right: 1px solid #C6C6C6;
border-bottom: 3px solid #C6C6C6;
border-left: 1px solid #C6C6C6;
Çäåñü öâåò è òèï ðàìêè îäèíàêîâ äëÿ âñåõ 4 ñòîðîí, îäíàêî çàäàåòñÿ 4 ðàçà. Òîëùèíà â 1ïèêñåëü îäèíàêîâà äëÿ òðåõ ñòîðîí. Äàííóþ çàïèñü ìîæíî ñîêðàòèòü äî çàïèñè â äâå ñòðîêè.
code:
background: #2D82B6 url(../images/topugol.gif) no-repeat top left;
background-color: #2D82B6;
Çäåñü âòîðîå ñâîéñòâî ëèøíåå, òàê êàê íå íåñåò ñìûñëà, èáî äóáëèðóåò ÷àñòü ïåðâîãî ñâîéñòâà.
code:
border-left-width: 120px;
border-left-style: solid;
border-left-color: #f1f1f1;
Çäåñü ìîæíî âñå çíà÷åíèÿ ïðîïèñàòü, èñïîëüçóÿ ëèøü îäèí ïàðàìåòð border-left. Ýêîíîìèì 2 ñòðî÷êè êîäà.
Ïðîìåæóòî÷íûå ðåçóëüòàòû:
temp/default/css/style.css
èñõîäíûé css ôàéë:
24 893 á
css ôàéë ïîñëå îïòèìèçàöèè:
16 904 á
Îáà ôàéëà èäåíòè÷íû, íå ñ÷èòàÿ èñïðàâëåíèÿ íåáîëüøèõ íåòî÷íîñòåé, îïèñàííûõ âûøå.
temp/default/css/simple.style.css
èñõîäíûé css ôàéë:
5 253 á
css ôàéë ïîñëå îïòèìèçàöèè:
3 382 á
Îáà ôàéëà èäåíòè÷íû, íå ñ÷èòàÿ èñïðàâëåíèÿ íåáîëüøèõ íåòî÷íîñòåé, îïèñàííûõ âûøå.