Жүктің жылдамдығын жақсарту үшін бірнеше CSS селекторларын топтастырыңыз
Өнімділік табысты веб-сайттың маңызды факторы болып табылады. Бұл сайт онлайн суреттерді қалай пайдаланатындығымен тиімді болуы керек. Бұл сайт келушілер үшін жақсы жұмыс істеп, олардың құрылғыларына тез жүктелуін қамтамасыз етеді. Тиімділік, сонымен қатар, сіздің үдерістеріңізді уақытында және бюджет бойынша сақтауға көмектесетін жалпы процестің бөлігі болуы керек.
Ақыр соңында, тиімділік веб-сайттың барлық қырларында және ұзақ мерзімді табыста, соның ішінде осы сайттың CSS парақтарына жазылған стильдерде рөл атқарады. Кішігірім, таза CSS файлдарын жасауға қабілетті бола отырып, идеалды болып табылады және мұны қол жеткізуге болатын тәсілдердің бірі - көптеген CSS селекторларын бірге топтастыру.
Селекторларды топтау
CSS селекторларын топтастырған кезде, стиль кестесіндегі мәнерлерді қайталамай, бірдей бірнеше стильдерді бірнеше түрлі элементтерге қолданады. Екі немесе үш немесе одан да көп CSS ережелері бар, олардың барлығы бірдей нәрсені жасайды (мысалы, қызыл түстердің қызыл түстерін орнатады), сіздің бетіңізге жететін бірыңғай CSS ережесі бар.
Бұл «селекторларды топтастыру» беттің пайда болуының бірнеше себептері бар. Алдымен, мәнер парағыңыз кішірек болады және жылдамырақ жүктеледі. Шын мәнінде, стильдер парақтары баяу жүктеу сайттарына қатысты негізгі кінәлілердің бірі емес. CSS файлдары мәтіндік файлдар болып табылады, сондықтан шын мәнінде ұзақ уақыт CSS парақтары кішкентай, файл өлшемі, ақылға қонымсыз бейнелермен салыстырғанда. Дегенмен, әр сәтте саналады, ал егер сіз CSS-нің кейбір өлшемін қырқып, беттерін әлдеқайда тез жүктей алсаңыз, бұл әрқашан жақсы нәрсе.
Тұтастай алғанда, учаскелер бойынша орташа жүктеме жылдамдығы 3 секундтан аз; 3-тен 7 секундқа жуық, орташа 7 секундтан асады. Бұл төмен сандар, сіздің сайтыңызға жету үшін сіз қолынан келгеннің бәрін жасауыңыз керек дегенді білдіреді! Міне, сондықтан сіз топты CSS селекторларын пайдалана отырып, сайтыңызды жылдам ұстауға көмектесуіңізге болады.
CSS селекторларын қалай топтау керек
Стиль кестесінде CSS селекторларын бірге топтастыру үшін, стильдегі бірнеше топталған селекторларды бөлуге арналған үтірлерді қолданады . Төмендегі мысалда style және div элементтері әсер етеді:
div, p {түсі: # f00; }Үтір негізінен «және» дегенді білдіреді. Осылайша, бұл селектор барлық элементтер элементтеріне және барлық бөліну элементтеріне қолданылады. Егер үтір жоқ болса, ол бөлімнің баласы болып табылатын барлық абзац элементтері болар еді. Бұл селектордың мүлдем басқа түрі, сондықтан бұл үтір шынымен селектордың мағынасын өзгертеді!
Селектордың кез-келген формасы басқа селектормен топтастырылуы мүмкін. Бұл мысалда сынып селекторы ID селекторымен топтастырылған:
p.red, #sub {түсі: # f00; }Сондықтан бұл стиль «қызыл» сынып атрибуты бар кез келген параграфқа және «sub» идентификаторы атрибуты бар кез келген элементке (біз қандай түрін көрсетпегендіктен) қолданылады.
Сіз селекторлардың кез-келген санын, соның ішінде жалғыз сөздер және комплемент селекторлары бар селекторларды қоса аласыз. Бұл мысал төрт түрлі селекторларды қамтиды:
p, .red, #sub, div a: сілтеме (color: # f00; }Сондықтан бұл CSS ережесі төмендегілерге қолданылады:
- Кез келген абзац элементі
- Кез-келген элемент «қызыл»
- Кез келген элементтің идентификаторы «sub»
- Бөлімнің басқарушылары болып табылатын якорь элементтерінің «сілтемені» жалған сыныбы.
Бұл соңғы селектор қосылыс селекторы болып табылады. Сіз бұл CSS ережесіндегі басқа селекторлармен оңай біріктірілгенін көре аласыз. Бұл ереже арқылы біз осы 4 селектордың # f00 (қызыл түсті) түстерін орнатып отырмыз, бұл сол нәтижеге жету үшін 4 бөлек селекторды жазуға жақсырақ.
Селекторларды топтастырудың тағы бір артықшылығы, егер сізге өзгерту қажет болса, бірнеше біреудің орнына бір CSS ережесін өңдей аласыз. Бұл дегеніміз, болашақта сайтты ұстап тұру кезінде сізге бұл салмақ пен уақытты үнемдейді.
Кез келген селекторды топтауға болады
Жоғарыда көрсетілген мысалдардан көретін болсақ, кез-келген нақты селекторды топқа қоюға болады және барлық топтастырылған элементтерге сәйкес келетін құжаттың барлық элементтері сол стиль сипатына негізделген бірдей стильге ие болады.
Кейбір адамдар топтастырылған элементтерді кодта оқуға арналған бөлек жолдарда тізімдеуді қалайды. Веб-тораптағы көрініс пен жүктеменің жылдамдығы өзгермейді. Мысалы, үтірлермен бөлінген мәнерлерді бір жолда бір мәнер сипатына біріктіруге болады:
th, td, p.red, div # firstred {түсі: қызыл; }
немесе айқындық үшін жеке сызықтарға стильдерді тізімдей аласыз:
ші,
td,
p.red,
div # firstred
{
түсі: қызыл;
}
Бірнеше CSS селекторларын топтастыру үшін пайдаланатын кез келген әдіс сіздің сайтты жылдамдатады және стильтерді ұзақ мерзімді басқаруды жеңілдетеді.
Дженнифер Крининнің түпнұсқа мақаласы. Джереми Джирард 5/8/17 жылы редакцияланған.