Поддържане на Вашия CSS3 код за маркиране Slim
Уеб разработчиците могат да спестят много време, използвайки по-сложен CSS3 синтаксис. Потребителите, които посещават страницата ви, очакват възможно най-бързото време за зареждане - което прави отговорността за запазване на размера на файла. Има много стенограми с CSS и особено по новия CSS3 модел.
Събрал съм няколко от тези идеи в ръководството по-долу. Трябва също да се докоснем до други области, като например намаляването на Вашия CSS код. Има инструменти в браузъра, които са на разположение за подпомагане на разработчиците в процеса на оформяне, но бихте искали да комбинирате кратки кодове с това намаляване на размера на файла, за да оптимизирате процеса на визуализация на уебсайта Ви..
Основни съвети за форматиране
Преди да скочим в действителния синтаксис на CSS, искам да разгледам темата на как да напишете своя CSS. Ако сте малко запознат с уеб дизайна, вероятно сте виждали стилове преди, вероятно повече от веднъж. Първата част от всяка команда се нарича селектор. Това е насочено към типа елемент, който ще получи стиловете, добавени във фигурните скоби, известни също като Имоти.
Inline Level
С вградените стилове всяко свойство се записва едно след друго, като се разделят само пространства. Този метод се прилага най-добре върху селектори, където имате нужда само от няколко свойства. Това ще ви спести място на страницата и превъртането на стила ви ще бъде много по-бързо. В случай, че никога преди не сте срещали вграден CSS, аз добавих малък пример под целевите HTML връзки за свързване.
a цвят: # 648cc8; тегло на шрифта: удебелен; a: hover color: # 739cda; текст-декорация: няма; a.alt color: # bd4949!
Ниво на блок
От друга страна свойствата на блоковия стил се въвеждат в един ред на двойка ключ / стойност и често се отстъпват за по-бързо редактиране при сканиране на кода. Около 99% от по-чистите стилове използвам това форматиране и то се превърна в индустриален стандарт за много дизайнери. Ако вашият селектор използва повече от 6 или 7 свойства, това е най-доброто форматиране за прилагане.
Когато вземете под внимание многото нови CSS3 свойства, вие също осъзнавате колко бързо се допълват стиловете. И много от тези свойства поддържат специфични за браузъра копия, които изискват почти дублиращи се кодове (като радиус на границата). Можете да разгледате моя пример за свойство на блока, зададено по-долу, насочено към примерния разделителен пакет.
.wrap display: block; пълнеж: 6px 10px; фон: #FFF; граничен радиус: 4px; -moz-border-radius: 4px; -bubkit-border-radius: 4px; -ограничен радиус: 4px;
Нито един от начините за писане на CSS не е по-добър от другия. В крайна сметка това е вашият избор като разработчик кой стил предпочитате, и дори това ще бъде според проекта, по който работите. Често се среща CSS, където дизайнерите са смесили двете заедно! Аз лично чувствам това “текущите работи” обикновено са по-лесни с блоковите стилове, тъй като постоянно разглеждам таблицата със стилове, за да правя редакции или допълнения. Но за трафик-тежките домейни, които намаляват вашия CSS файл, е най-добрият начин да отидете.
Поддържане на тънък
Чрез използването на много кратки кодове в CSS3 можете да спестите много време за разработка. Редактирането на HTML елементи ще стане много по-лесно, тъй като разбирате това спестяващо време жаргон. Освен това вашият код ще изглежда по-чист и по-лесен за разглеждане.
Единственият недостатък е, че не всички браузъри напълно поддържат тези свойства. Има много заобикалящи решения за много от съществуващите проблеми, като например в Internet Explorer и Netscape. За щастие уеб винаги напредва напред и тъй като CSS3 нараства в популярността, ние без съмнение ще изпитаме растеж в съвместимостта на браузърите..
RGBa Цвят Прозрачност / непрозрачност
Новият RGBavalue не е точно CSS3 Имот, но Алфа прозрачността е специфична само за CSS3. Вместо обичайните "Red Green Blue" стойности, които предавате за цвят, който можете да направите сега включва четвърта опция за прозрачност на цветовете. Поради тази причина уеб разработчиците се правят почти изцяло с прозрачни PNG файлове.
Основният синтаксис изисква стойност от 0-255 в първите три (3) слота и 0-1.0 в алфа позицията. Цветовата гама е специфична за това колко от всеки оттенък (RGB) се вижда, като 0 е нищо и 255 пълно.
/ ** синтаксис ** / фон: rgba (име_на стойност, име_на стойност, име_на стойност, име_на стойност, стойност на непрозрачността); / ** например ** / div фон: rgba (255, 255, 255, 0.3);
Съвместимост между браузърите
Друг имот непрозрачност може да се използва при някои обстоятелства. Това обаче ще се отрази на целия HTML елемент и вътрешното съдържание, а не само на фона, както сте видели в моя пример.
За съжаление Internet Explorer още не поддържа стойността на цветовете RGBa. По принцип трябва да включите резервно свойство с пълна непрозрачност за тези по-малко стандартни браузъри. Можете да зададете това със същите стойности, но без 4-тото (непрозрачност). Ще изглежда нещо подобно rgba (255, 255, 255)
Освен това Internet Explorer може да бъде обработен малко по-изящно чрез условни настройки. Всъщност можете да проверите дали браузърът работи с IE и да покажете собствения Microsoft CSS филтър по команда. Показах това в примера по-долу (имайте предвид, че това ще се появи някъде в HTML файла ви):
CSS3 Радиус на границата
Прочетох няколко объркващи теми във форума за създаването на заоблени граници с CSS3 - не толкова от страна на това, как се прави, но с фина поддръжка на браузъра, уеб разработчиците търсят най-лесния код за пускане и функциониране, както се очаква.
/ ** синтаксис ** / радиус на границата: отгоре вляво горе вдясно долния десен вляво;
Най- граничен радиус Собствеността споделя подобен синтаксис за създаване на стандартна граница, освен в този случай ние се насочваме към ъглите на кутията. Това свойство действително ще приеме 1 - 4 стойности и всяка от тях е насочена към различна настройка на ъгли.
- 1 стойност: Всичките четири ъгъла са закръглени до една и съща стойност
- 2 стойности: Първата стойност се отнася за
горе влявоидолу вдяснодокато втората стойност се ударигоре в дясноидолу вляво - 3 стойности: Първо се отнася за
горе влявовторото е и дветедолу вляво&горе в дяснодокато третата и крайната стойност се прилагат къмдолу вдясно - 4 стойности: Всички 4 стойности определят ъгли в следния ред: отгоре вляво, горе вдясно, долу вдясно, долно ляво
/ ** например ** / div border-radius: 4px 4px 8px 4px; div граничен радиус: 4px 4px 8px;
Така че в горния код използваме граничен радиус да приложите 4px закръглен ефект върху всичко, с изключение на долу вдясно граница, която получава 8px изгладена крива. Ако сте го забелязали, и двата кода действително ще приложат същия ефект на стила.
Съвместимост между браузърите
Сега основният проблем е това граничен радиус се поддържа само в няколко браузъра. Наскоро Internet Explorer 9 добави голяма подкрепа и Opera ще направи това. Но дори Opera е създала своя собствена собственост -о-граничен радиус насочване към специфичния им браузър. Допълнително -Моз гранично-радиус се поддържа от Firefox / Gecko софтуер и -WebKit-граничен радиус за Google Chrome / Safari.
Кодът по-долу е пример за моя голи кост шаблон за създаване на заоблени ъгли с най-голямата глобална поддръжка на браузъра.
div border-radius: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -ограничен радиус: 4px 4px 8px 4px;
Fancy a Drop Shadow?
Другият наистина страхотен аспект на CSS3 е поддръжката кутия и текстови сенки. Това е такъв проблем за разработчиците в миналото, тъй като фоновите изображения са единственият реалистичен вариант. Този синтаксис всъщност следва кратка роля, която е много по-лесна от другите свойства, които сме обхванали. Първо е трудно да запомните правилния ред на ключовите стойности, но колкото повече практикувате, толкова по-лесно ще стане.
За съжаление Internet Explorer отново е странно. Всеки друг основен браузър, включително Firefox, Google Chrome, Safari и Opera, напълно подкрепя текстови сянка Имот. Разработчиците са се опитали да създадат своя собствена IE поддръжка, но все още са много ограничаващи. Основният синтаксис е написан както следва:
/ ** синтаксис ** / текст-сянка: x-offset y-offset цвят на размазване-радиус; / ** например ** / div text-shadow: 2px 2px 1px # 111;
Отместването X и Y съобщава на браузъра колко далеч над и надолу трябва да се появи сянката. Можете да използвате отрицателни стойности, за да позиционирате сянката над и над лявата, съответно. Но това идва далеч изглежда много неловко, така че аз препоръчвам положителни числа. Също така стойността на радиуса на размазване може да се използва за изглаждане на твърдите ръбове, ако текстовата сянка изглежда неестествена.
Този синтаксис просто гледа в основната нотация при създаването на един ефект на сянка. Високотехнологичните дизайнери са се научили да създават едновременно няколко сенки! Аз се позовавам на това страхотно блог пост от април 2011 г., който отива в големи подробности за налагане на текстови сенки. Ако имате време, прегледайте съдържанието само, за да получите представа за по-разширените функции и не забравяйте да го маркирате като бъдеща справка!
Съвместимост между браузърите
Най-големият критик, с който се сблъскваме, е Internet Explorer. Отново и отново Майкрософт избута собствения си двигател за визуализация на браузъра, който в най-добрия случай се представи под номинална стойност. Сега, дори и с CSS3, който управлява текстовите сенки, IE все още изостава. Има страхотен демо сайт, където можете да намерите примери за кодове и традиционни CSS коментари.
По принцип искате да проверите дали браузърът, който ползва вашият потребител, съответства на всяка версия на Internet Explorer 9 или по-ниска. След това с помощта на MS филтри можем да приложим сянка във всеки текстов елемент (по-горе, използваме абзац).
Облекчаване на преходите
CSS3 преход е най-горещата собственост на пазара за дизайн от баба на баба! Уеб дизайнерите правят подобна суетене около чистите CSS преходи, въпреки че поддръжката е ограничена главно до Webkit браузъри. Разбира се, можете да използвате вторични свойства за Mozilla и Opera и такива. Но стенографската нотация е наистина завладяваща, особено ако сте против JavaScript анимации по някаква причина.
Първо нека разгледаме първоначалното свойство на прехода. Това ще изисква 4 стойности, които бихте могли да разбиете и на самите имоти. Те съответстват на прехода Имот(какъв е ефектът), продължителност(колко време да го извадя), времето функция(промени в скоростта на анимацията) и закъснение(брой секунди, които трябва да изчакат преди анимацията).
/ ** синтаксис ** / Преход: закъснение на функцията за продължителност на времето; / ** например ** / img transition-property: opacity; преход-продължителност: 2s; функция за преходно-времева: лекота; закъснение при преход: 0.5s;
Трябва интуитивно да разберете целта на повечето от тези свойства, освен евентуално функцията за време. Въпреки че в началото е объркващо, този имот просто анимира прехода ви по различен начин, така че ефектът ще започне по-бавно, ще завърши по-бавно или нещо подобно.
W3 Schools има онлайн функция, която изброява всички възможни стойности, които можете да изпробвате. Постоянно намирам себе си в Google за тези ръководства, но те правят такива удобни отметки.
Съвместимост между браузърите
Сега нека да включим пълната поддръжка на браузъра. По подразбиране свойството на прехода е само поддържа се от по-нови версии на Safari. Въпреки това много потребители все още изискват -WebKit префикс, който се отнася и за Google Chrome и други подобни механизми за изобразяване. По-долу е показан a “финализирани” шаблон за блоков код Препоръчвам ви да записвате и използвате, ако се нуждаете от поддръжка на прехода от повечето уеб браузъри.
img transition: непрозрачност 2s лекота в 1s; -webkit-transition: непрозрачност 2s лекота в 1s; / * хром, сафари, стадо * / -moz-transition: непрозрачност 2s лекота в 1s; / * mozilla + gecko * / -o-transition: непрозрачност 2s лекота в 1s; / * opera * /
Ефекти на текстовия удар
Този имот не е огромен и няма да намерите много уеб дизайнери, които да го използват днес. Но можете да използвате текст-тактов да създадете някои наистина чисти ефекти с вашите шрифтове. Webkit браузъри като Safari и Chrome са единствените истински поддръжници на този имот досега. Opera и Firefox изпитват трудности при изобразяването на текстови обекти със същите очертания.
/ ** синтаксис ** / p -webkit-text-stroke: ширина на цвета; / ** например ** / p -webkit-text-stroke: 1px # 222;
Съвместимост между браузърите
Ако имате нужда от ефекти на текстов удар, винаги трябва да включвате резервен цвят. Mozilla и Opera могат да се справят, но потребителите на Internet Explorer нямат други опции. За съжаление това е една от новите свойства на CSS3, която просто не е получила достатъчно подкрепа от общността на разработчиците на уеб браузъри. Трябва да прекарате известно време да играете с този чудесен уеб инструмент, специално създаден за изграждане на тези CSS3 текстови очертания.
Box оразмеряване
Свойството за оразмеряване на кутията ви дава повече контрол върху общата ширина / височина на всеки блок елемент. По подразбиране ширината / височината + граница + поле + подложка съставляват общия размер на кутията. Обаче използването на границата на вашето съдържание избутва всички ваши подложки и полета навътре да запази ширината точно по същия начин. За това свойство има само две стойности, с съдържание кутия е по подразбиране.
div ширина: 550px; пълнеж: 9px; оразмеряване на кашони: гранична кутия; / * ширината ще остане 550px * /
Както можете да си представите, това ще е полезно в някакъв момент по време на вашата кариера в CSS. Подложките и полетата могат да бъдат истинска болка и когато добавите граници, вие губите следите от пикселите.
Съвместимост между браузърите
Opera и IE 8 поддържат това ново свойство по подразбиране. IE7 и по-долу са останали с настройката на полето за съдържание, освен ако посетителите ви не използват режим на странности. Единствените допълнения, които трябва да знаете за конкретно насочените към браузъра двигатели на уебкита и Mozilla.
div -webkit-box-sizing: гранична кутия; / * Safari / Chrome * / -moz-box-sizing: гранична кутия; / * Firefox * / оразмеряване в кутия: border-box; / * Opera / IE8 + * /
Чисти CSS3 колони
Колоните са малко трудни за CSS3, но могат да бъдат изпълнени с минимален код. 2-те свойства, на които искате да се съсредоточите, са колона броене и колона междина. Броячът се позовава на общия брой колони, които искате да приложите, докато празнината създава поле между всеки един.
div # cols колонен брой: 3; пролука в колоната: 10px;
В моя пример можем да видим ID #cols, които се използват като контейнер. Вътре разделяме div на 3 колони с 10px разлика между всеки един. По-нататък можете да зададете колона ширина който се използва за задаване на общата ширина на всяка колона, вместо да се изброява солиден номер.
Съвместимост между браузърите
Всичко преди IE8 просто няма да може да се възползва от този имот. Но както видяхме във всеки пример, Mozilla и Webkit предлагат свои собствени решения за множество браузъри. Ако имате нужда от шаблон, разгледайте моя малък примерен код по-долу:
div # sidebar width: 210px; -moz-колона-брой: 3; -moz-column-gap: 7px; - брой на колонките: 3; -webkit-column-gap: 7px; броя на колоните: 3; пролука в колоната: 7px;
Custom @ font-face
Трябва да сте чули за вълнението по отношение на CSS3 персонализираните шрифтове. С помощта на свойството @ font-face можем да импортираме външни стилове на шрифтове и да ги използваме като всяко друго семейство. Синтаксисът е малко измамен и ще трябва да прекарате известно време, за да го направите правилно. Блокът за @ Шрифт лице се използва за определяне на фамилно име, след което можете да го използвате в шрифтово семейство имоти!
@ font-face семейство на шрифтове: 'MyNewFont'; src: url („New_Font.ttf“), url („New_Font.eot“); / * Само за Internet Explorer * /
Виждате по-горе, че не насочвам никакъв специфичен тип шрифт, но синтаксисът е това, което трябва да се откроява. Забележете, че Internet Explorer поддържа само .EOT типове шрифтове, докато .TTF и .ОСТ са популярни опции за другите браузъри. Също така от значение е да разберете, че можете да предавате шрифт URL адреси от директни връзки, т.е.. URL ( "https://www.hongkiat.com/css3/fonts/myfont.ttf ');
Няма никакъв реален кръстосан браузър проблем с тази настройка, тъй като всички двигатели за изобразяване могат да анализират тези типове файлове с шрифтове. Само не забравяйте, че за подкрепа на IE трябва да включите eot версия, както и оригинала. Смятам, че статията W3 Schools съдържа каталог на най-важната информация, която трябва да проверите.
Преобразуване в миниатюрен CSS
Тази тема се обсъжда често, тъй като служи за различна цел за всеки проект. От една страна, уеб разработчиците прекарват много време в писането на стилове. Няма начин да се шифрира този тип данни от обикновен текст и да се скрие от окупиращи очи. Ако се опитвате да попречите на другите да крият кода си, най-доброто, което можете да направите, е да натрупате стилове и да премахнете всички прекъсвания / интервали.
Този процес може да бъде обозначен като ниатюризирането кода. Обикновено разработчиците ще напишат CSS в стандартен формат и след това ще премахнат всички празни пространства, преди да ги качат на уеб сървъра. След това имате местно копие, за да редактирате бързо, като същевременно осигурявате по-малка версия на проекта на живо. Този метод очевидно може да бъде полезен за намаляване на натоварването на страниците, както и за запазване на похитителите на код.
Връзката, която публикувах по-горе, водеща до минимизиране на CSS има някакъв чудесен материал по въпроса. Сайтът също така предоставя инструмент, базиран на браузър, за премахване на такива интервали и връщането на ключове от кода ви. CSS Compressor е друга опция, която предлага прост интерфейс, който работи директно в уеб браузъра ви. Също така чух добри неща за Clean CSS, въпреки че никога не съм използвал приложението.
Сродни връзки
За да ви държим напред напред, предоставих шест удобни връзки от мрежата. Те включват не само съкратена нотация, но и полезни ръководства и уроци за достъп, когато практикувате този нов кратък CSS код.
- Ръководство за начинаещи към CSS3
- Кратко ръководство за CSS
- Използвате ли CSS3 подходящо?
- CSS съдържание и диаграма на съвместимостта на браузъра
- CSS3 + Прогресивно подобрение = Интелигентен дизайн
- Пълна информация за CSS / CSS3 Properties
заключение
Необходимо е много посвещение и практика за писане на CSS код за изграждане на конкретен график, който можете да следвате за всеки проект. Повечето уеб дизайнери са щастливи да вземат нови проекти и идеи, така че със сигурност ще намерите време да практикувате тези полезни съвети за кодиране. Опитайте да копирате малък справочен лист за ваше собствено удобство, в случай че не можете да намерите никакви мами, или дори по-лошо, ако загубите интернет връзка!
Знаете ли за други удобни CSS3 свойства или преки пътища? Бихме искали да чуем вашите мисли и идеи в коментарите на дискусията. Уеб разработчиците настояват за повече стандартизация в рамките на W3C и очевидно преходът става все по-лесен. CSS3 предоставя фантастични предимства и ако можете да овладеете стенографско кодиране, това ще запази ниските ви размери на файловете и ще възпира копията да крадат кода ви.
