Група Повеќе CSS селектори за подобрување на брзината на оптоварување
Ефикасноста е важен фактор во успешна веб-страница. Веб-страницата треба да биде ефикасна во користењето слики онлајн . Ова ќе помогне да се осигура дека веб-страницата добро функционира за посетителите и брзо се вчитува на нивните уреди. Ефикасноста исто така треба да биде дел од вашиот целокупен процес, помагајќи ти да го задржите напредокот на сајтот на време и на буџет.
На крајот, ефикасноста игра улога во сите аспекти на создавањето на веб-страницата и долгорочниот успех, вклучително и во стиловите што се напишани за CSS листите на овој сајт. Да се биде во можност да се создадат поцврсти, почисти CSS датотеки е идеален, и еден од начините на кој можете да го постигнете ова е со групирање на повеќе CSS селектори заедно.
Селектори на групирање
Кога ги групирате селекторите на CSS , ги применувате истите стилови на неколку различни елементи без да ги повторувате стиловите во вашиот стилски лист. Наместо да имате две или три или повеќе CSS правила, од кои сите го прават истото (пример, поставете ја бојата на нешто во црвено), имате еднократно CSS правило кое се постигнува за вашата страница.
Постојат неколку причини зошто оваа "групација на селектори" има корист од страницата. Најпрво, вашиот стилски лист ќе биде помал и ќе се вчита побрзо. Се разбира, стилски листови не се еден од главните виновници кога станува збор за бавни места за вчитување. CSS-датотеките се текстуални датотеки, па дури и навистина долгите CSS листови се мали, големината на датотеката е мудра, кога се споредуваат со неоптимизирани слики. Сепак, секој малку се брои, и ако можете да бричете одредена големина на вашиот CSS и да ги вчитате страниците што многу побрзо, тоа е секогаш добра работа.
Општо земено, над просечните оптоварувања за места за сајтови се помалку од 3 секунди; 3 до 7 секунди е просек, а повеќе од 7 секунди е само бавно. Овие ниски броеви значат дека, за да ги постигнете со вашата веб-страница, треба да направите се што можете! Ова е причината зошто можете да помогнете да го задржите вашиот сајт брзо користејќи групирани CSS селектори.
Како да групирате CSS селектори
За да ги групирате селекторите на CSS заедно во вашиот стилски лист, користете запирки за да ги одделите повеќе групираните селектори во стилот. Во примерот подолу, стилот влијае на p и div елементи:
div, p {боја: # f00; }Кометата во основа значи "и". Значи овој селектор се однесува на сите елементи на став и сите поделбени елементи. Ако запирка недостасува, наместо тоа, ќе бидат сите елементи на став кои се дете на поделба. Тоа е многу различен вид на селектор, така што оваа запирка навистина го менува значењето на селекторот!
Секоја форма на селектор може да се групира со кој било друг селектор. Во овој пример, селектор на класа е групиран со селектор на ID:
p.red, #sub {color: # f00; }Така, овој стил се однесува на секој став со атрибут на класата "црвено", и било кој елемент (бидејќи ние не специфициравме кој вид) има атрибут на "под".
Можете да групирате било кој број на селектори заедно, вклучувајќи селектори кои се поединечни зборови и селектирачи. Овој пример вклучува четири различни селектори:
p, .red, # sub, div a: link {color: # f00; }Значи ова правило CSS ќе се примени на следново:
- Секој елемент на став
- Секој елемент со класата на "црвено"
- Секој елемент со лична карта на "под"
- "Врската" псевдо класа на сидро елементи кои се декларанти на поделба.
Тој последен селектор е составен селектор. Можете да видите дека лесно се комбинира со другите селектори во ова правило за CSS. Со тоа правило ја поставуваме бојата на # f00 (што е црвено) на овие 4 селектори, што е подобро да пишувате 4 одделни селектори за да го постигнете истиот резултат.
Друга корист од групирањето на селектори е дека, ако треба да направите промена, можете да уредувате едно единствено CSS правило наместо повеќе. Ова значи дека овој пристап ви заштедува тежина на страница и време кога станува збор за одржување на страницата во иднина.
Било кој селектор може да се групира
Како што можете да видите од горенаведените примери, секој важечки селектор може да биде ставен во група, а сите елементи во документот кои одговараат на сите групирани елементи ќе имаат ист стил врз основа на тој стил на својство.
Некои луѓе претпочитаат да ги наведат групираните елементи на одделни линии за читливост во кодот. Изгледот на веб-страницата и брзината на оптоварување остануваат исти. На пример, можете да комбинирате стилови одделени со запирки во еден стил на својство во една линија на код:
th, td, p.red, div # firstred {боја: црвено; }
или можете да наведете стилови на одделни линии за јасност:
ти,
td,
p.red,
div # firstred
{
боја: црвена;
}
Или методот што го користите за групирање на неколку CSS-селектори го забрзува вашиот сајт и го олеснува управувањето со стилови долгорочно.
Авторски напис од Џенифер Крајнин. Ревидирани од Џереми Жирар на 5/8/17.