Преди да преминем към същината на статията искам с няколко реда да припомня начините за добавяне на CSS. Имаме три варианта - външен файл (external), вътрешен (internal), който седи между <head> таговете и инлайн, който се пише директно на реда на конкретния елемент (inline). Съответно всеки тип си има свой приоритет, като най-приоритетен е инлайн стила, следва го вътрешния и накрая CSS-а зареден от външен файл. Доста хора от вас знаят, че напишете ли нещо инлайн, то няма промяна от друго място, но това не е точно така. В тази статия ще поговорим за това как можем да променяме инлайн стиловете забити в HTML-a.
Налагало ли ви се е да напишете инлайн код, който след това ви се иска на определено място да не се изпълнява? Разбира се, ако сте програмист ще кажете "Какво толкова? Това е един if и един else, но за обикновен front-end developer, пречупено през неговия поглед, това е нещо много сложно. Не се притеснявайте обаче, защото има решение на проблема. За добро или зло то не работи под Internet Explorer 6, но за сметка на това под всички останали браузъри е безпроблемно.
В следващите редове съм опитaл да дам, както решението на проблема така и прост пример за използването му.
Написан от мен сайт на HTML и CSS, на който съм описал всички нужни елементи, като например <p></p>,<span></span>,<a></a>, <h1><h1>, <h2></h2> и т.н. бива поддържан впоследствие от човека "X".
Нека приемем, че оригиналният код изглежда така:
HTML
<p>dummy text "1"</p> <p>dummy text "2"</p> <p>dummy text "3"</p> <p>dummy text "4"</p> <p>dummy text "5"</p>
CSS
p {
color:#777;
font-size:11px;
font-weight:400;
padding:0 0 10px;
}
Този човек "X" решава, че с няколко прочетени урока може да пише HTML и CSS и започва да твори инлайн, което е крайно непрепоръчително. Всички промени изглеждат да речем така:
HTML
<p style="color:#3F6;padding:10px 0;">Lorem Ipsum is simply dummy text "1"</p> <p>Lorem Ipsum is simply dummy text "2"</p> <p style="color:#3F6;padding:10px 0;">Lorem Ipsum is simply dummy text "3"</p> <p>Lorem Ipsum is simply dummy text "4"</p> <p style="color:#3F6;padding:10px 0;">Lorem Ipsum is simply dummy text "5"</p>
Разбира се след като са направени "нужните" промени от лицето "X", по ирония на съдбата трябва отново вие да се занимавате със сайта и тогава идва моментът, в който изпадате в шок, виждайки наблъсканите инлайн стилове. Започва любимото ми занимание "Find and Replace". Но, както вече казах има и по-лесно решение на проблема...
И така... решението!
p[style]{
color:#666 !important;
font-weight:700 !important;
}
Като цяло изобщо не трябва да изпадате в подобни ситуации, но всичко се случва. Сблъскате ли се с нещо подобно означава, че човекът, който е писал не е запознат с абривиетурата CSS. Все пак ако се натъкнете на код, който е писан по този начин, вероятно повечето от вас ще използват "Find and Replace". Понякога обаче, използвайки CMS системи това може да не е най-подходящият начин за пренаписването на генериран от WYSIWYG редактор код.
Loading ...