Премахване на неизползваните правила CSS в целия сайт, оптимизация на CSS сайта, използване на CSS, прах мен
Рано или късно, всеки предния край (програмист) е изправен пред предизвикателство, когато искате да проверите целия сайт за всички неизползвани правила CSS. Първото нещо, което идва на ум е да Google и да намерят някакъв вид услуга или програма, която ще направи всичко мръсната работа за нас.
Накратко popotel и е установено, тези решения:
- платена услуга unused-css.com
- DustMe селектори - разширение Firebug за Mozilla
- CSS Употреба - подпалвач разширение за Mozilla
Така че започнете с това, което имаме нужда от софтуер. Първото нещо, което трябва Mozilla Firefox. След като е инсталиран Firefox, инжектира допълнение Firebug.
Първоначално готовност постигнала по-нататъшен повече подробности за допълнения на сканиране CSS.
Праховите Me селектори
Допълнения прах Me селектори в официалния каталог на добавки към браузъра не, можете да го инсталирате, като кликнете върху линка и кликнете върху бутона Install Now (разбира се, трябва да отворите FireFox'om връзка). Доплащане инсталиран, рестартирайте браузъра и в долния десен ъгъл имаме икона розов метла.
След разширяването ще сканира страницата, се отваря прозорец с три раздела Неизползваните селектори (неизползвани правила), използвани селектори (правилата, от които се използват) и Spider дневник (Spider - сканиране на сайта). Долните два бутони, за да спести на документа и ясен резултат за сканиране.
По принцип, ако трябва да се провери една страница след това разширение ще ви помогне напълно, ще спомена, че най-минус всякакви допълнения отваряне през цялото време сканирана страница, по-кратък контрол разширяване не е много удобно, така че аз отбелязани върху него.
За да проверите страницата за неизползваните правила трябва да натиснете бутона Scan (сканиране ще отнеме 30 секунди, или дори по-малко). На пръв поглед изглежда, че това разширение ще сканира само една страница, какво ще правиш с останалата част на страницата, можете да поискате. И не забравяйте, ние поддържаме карта на сайта, за да помогне за разширяване на прах Me селектори, макар че, ако на преглед сайтове имат HTML карта на сайта, най-добре е да го използвам, но ако тя не съществува след това да създадете нова страница на сайта и поставете картата на сайта, за да се разшири прах Me селектори (ако не можете да след това да създадете нова страница за това по-долу).
Сега ще опишем последователност от действия за сканиране:
- отворен HTML карта на сайта
- натиснете F12 - отворен Firebug
- отидете на раздела CSS Употреба
- натиснете бутона AutoScan
- опресняване на страницата (натиснете F5)
Резултатът е първата сканирана страница. Можете да запишете резултата, и може допълнително да продължи сканирането. Предлагам ви да продължи. Продължи сканиране лесно, ние няма да се наложи да изберете нещо (тъй като ние избрахме страници автоматично сканиране), просто отидете на първата връзка в картата на сайта (връзка, за да отворите в нов прозорец не е необходимо, е необходимо всички Действието се развива в един прозорец).
следната нотация е посочено в началото на сканираната страница:
- Линия - правила линия
- CSS селектор - CSS правило
- Погледнато - използва CSS правило (светло зелено)
- Виждал преди - CSS правила, които са били използвани преди това (тъмно зелено)
- Невидимите - неусвоени правила CSS (червен)
- : Hover - CSS правила за продукти, които са получили фокус (сиво)
- (2 сканирания) - показва броя на сканиране (ако сканирани текущата една страница съответно на фигура 1)
- изнасяме почистват CSS - запаметите сканираното
Може да продължи да продължи да сканира истината ще трябва да се върнете към картата на сайта (първо вземат). Proklikivat бързат, не е необходимо, важно е, че страницата е заредена напълно, работа автоматично сканиране ще видите (тоест, резултатите от сканирането ще бъде показано в FireBug'a на прозорец).
Разширяване покажат всички файлове щепсел стил. Ако CSS правила на сайта много, трябва да скролване, за да видите резултатите от сканирането:
Този резултат се появява след всеки файл стилове, ако повече от един.
Когато всички страници са били сканирани, кликнете върху износа почистват CSS връзка. Това ще отвори в нов раздел, изберете всичко и да го запишете във файл с разширение .css на. преди всяко правило неизползван таг ще бъдат изброени НЕИЗПОЛЗВАН:
Вторият недостатък на този метод на сканиране е, че това разширение не сканиране сайт на изскачащи прозорци (модален) прозорец, толкова съжалявам, така че аз трябва да копирате правилата на CSS за модални прозорци.
Въпреки две минуси по мое мнение това е най-якото метода на CSS файл, за да проверите за неизползваните правила CSS. която съществува и днес.
Аз я прилагат за оптимизиране на двата стила файлове с тегло 360K - 18 000 линии, аз бях шокиран, когато го видях. След всички манипулации с помощта на този метод, за да получите един стилове - 90KB и 1100 линии всички бяхме доволни от резултата, и аз съм също. Вярно решение се иска за дълго време, следващия път ще бъде много по-бързо, което е много приятен.
И между другото, ако сте избрали WordPress система за управление на съдържанието, в тази статия можете да научите как да го карта на сайта направи.
И все пак, имайте предвид, че цената, платена служба изпраща резултата от сканирането в рамките на 24 часа, а ако вашият сайт (ресурс) 10 или 20 страници с шаблони, вашия чек тя ще отнеме много по-малко време, отколкото изразходвате, за да изчака резултатите от тях. Но ако страниците на сайта и огромен брой от тях се използват различни модели, разбира се, че е препоръчително да плати kakieto $ 25 за тази услуга.
Надявам се, че ще бъде полезно на този метод, за да проверите CSS файл.
Оптимизиране на връзката Google Maps, инвалидизация ненужните файлове от стилове и шрифтове, оказване на текущата карта, в случай на наличие на съда на страницата
Днес аз ще споделя с вас моя скрипт, който да използвам просто да проверите полета на формата да се запълни преди да ги изпратите към сървъра посредством JQuery (скрипт може да провери различни форми на една страница)
Дълго време, аз не пиша нищо за JQuery, някак си ръце не са достигнали. Ние се реши проблема, като работи с линията на продукти / услуги / статии, криейки последния ред, когато промените ширината на линията с елементите
Искам да споделя с вас раздел главата на HTML маркиране, което да използвам за оформлението на сайтове
В този урок ще разгледаме пет различни браузъри, напреднали CSS3 решения много лесно оформление на сложни, творчески проекти. По-специално, ние ще разберем как да се направи за прозрачност, сенки, въртене, градиент и инверсионни елементи
Най-накрая падна свободен миг и зависимост от вашите искания, аз написах друг, малък скрипт за некръглия слайдер с хоризонтално превъртане, без използването на плъгини
Адаптивен дизайн = = адаптивен дизайн аксиома. Минимална история на развитието на уеб дизайн: пътя си от фиксиран в течност и отзивчиви към (отзивчив, адаптивна, отзивчив) дизайн