Чување Вашег ЦСС3 кода Маркирање Слим
Веб програмери могу уштедети много времена користећи софистициранију ЦСС3 синтаксу. Корисници који посете вашу страницу очекују најбрже могуће време учитавања - због чега је ваша одговорност да смањите величине датотека. Има доста скраћеница са ЦСС-ом и посебно под новим ЦСС3 моделом.
Ставио сам неколико ових идеја у водич у наставку. Такође треба да се дотакнемо и других области као што је смањење Вашег ЦСС кода. Доступни су алати у прегледачу који помажу програмерима у процесу обликовања стила, али бисте жељели комбинирати кратке кодове с овим смањењем величине датотеке како бисте у коначници поједноставили процес израде веб-локације.
Основни савети за форматирање
Пре него што скочимо у стварну ЦСС синтаксу желим да пређем преко теме како да напишете свој ЦСС. Ако сте мало упознати са веб дизајном, вероватно сте раније видели стилове, вероватно више од једном. Први део сваке команде се назива селектор. Ово циља на тип елемента који ће примити стилове који се додају унутар витичастих заграда, такође познатих као својства.
Инлине Левел
Код инлине стилова свака особина се пише једна за другом са само размацима који их раздвајају. Овај метод се најбоље примењује на селекторе где вам је потребно само неколико својстава. То ће вам уштедети простор на страници и скроловање кроз ваш стилски лист ће бити много брже. У случају да никада раније нисте наишли на уграђени ЦСС, додао сам мали пример испод циљања ХТМЛ веза за сидро.
а боја: # 648цц8; фонт-веигхт: болд; а: ховер цолор: # 739цда; тект-децоратион: ноне; а.алт цолор: # бд4949!
Блоцк Левел
С друге стране, својства блок-стила уносе се у један редак по пару кључ / вриједност и често се уводе за брже уређивање код скенирања кода. Око 99% чистијих стилских табела користим ово форматирање и постало је индустријски стандард за многе дизајнере. Ако ваш селектор користи више од 6 или 7 својстава, ово је најбоље форматирање.
Када узмете у обзир многа нова ЦСС3 својства, такође схватате колико брзо се ваши стилови попуњавају. А многа од ових својстава подржавају копије специфичне за претраживаче које захтевају готово дупле уносе кода (као што је радијус границе). Можете проверити мој пример особине блока постављеног испод циљања узорка див омотача.
.врап дисплаи: блоцк; паддинг: 6пк 10пк; позадина: #ФФФ; бордер-радиус: 4пк; -моз-бордер-радиус: 4пк; -вебкит-бордер-радиус: 4пк; -о-бордер-радиус: 4пк;
Ниједан начин писања ЦСС-а није посебно бољи од другог. На крају крајева, то је ваш избор као девелопера који стил желите, аи то ће бити у складу са пројектом на којем радите. Чак је и заједничко пронаћи ЦСС гдје су дизајнери комбинирали оба! Ја то лично осећам “радови су у току” имају тенденцију да буду једноставнији са блок-стиловима јер стално проучавам стилске листове да бих вршио измене или допуне. Али за домене са великим прометом који минирају ваш ЦСС фајл је апсолутно најбољи начин да се крене.
Кеепинг Тхем Слим
Користећи многе кратке кодове доступне у ЦСС3 можете уштедети много времена за развој. Уређивање ХТМЛ елемената постаће много лакше ако разумете овај језик који штеди време. Поред тога, ваш код ће се појавити чишћи и лакши за гледање.
Једини недостатак је то што нису сви претраживачи у потпуности подржали ова својства. Постоје многа решења за многа постојећа питања, као што су Интернет Екплорер и Нетсцапе. Срећом, Веб увек напредује напред и како ЦСС3 расте у популарности, несумњиво ћемо искусити и раст компатибилности претраживача..
РГБа Транспарентност боја / непрозирност
Нова РГБавалуе није баш ЦСС3 својство, али алфа транспарентност је специфична само за ЦСС3. Уместо уобичајених вредности "Црвено зеленог плавог", прелазите на боју коју сада можете укључују четврту опцију транспарентности боја. Због тога су веб програмери готово у потпуности направљени са транспарентним ПНГ-овима.
Основна синтакса захтева вредност од 0-255 у прва три (3) слота и 0-1.0 у алфа позицији. Распон боја је специфичан за то колико је од сваке боје (РГБ) видљиво када је 0 ништа и 255 пуна.
/ ** синтакса ** / позадина: ргба (валуе_наме, валуе_наме, валуе_наме, валуе_наме, опацити_валуе); / ** пример ** / див бацкгроунд: ргба (255, 255, 255, 0.3);
Компатибилност међу претраживачима
Још једна имовина непрозирност може се користити у неким околностима. Међутим, то ће утицати на читав ХТМЛ елемент и унутрашњи садржај, а не само на позадину коју сте видели у мом примеру.
Нажалост, Интернет Екплорер још увек не подржава вредност боје РГБа. Опћенито требате укључити повратно својство с потпуном непрозирношћу за ове мање стандардне прегледнике. Ово сте подесили са истим вредностима, али искључујући 4. (непрозирност). Изгледало би нешто слично ргба (255, 255, 255)
Додатно, Интернет Екплорер се може обрадити нешто грациозније преко услова. Можете да проверите да ли претраживач покреће ИЕ и да прикаже власнички Мицрософт ЦСС филтер по команди. Ово сам показао у мом примјеру испод (имајте на уму да ће се то појавити негдје у ХТМЛ датотеци):
ЦСС3 Бордер Радиус
Прочитао сам неколико збуњујућих тема форума о креирању заобљених граница са ЦСС3 - не толико на страни како се то ради, већ са фином подршком за претраживаче, веб програмери се труде да најлакши код испадне и функционише како се очекује.
/ ** синтакса ** / бордер-радиус: топ-лефт топ-ригхт боттом-ригхт;
Тхе бордер-радиус својство дијели сличну синтаксу са креирањем стандардне границе, осим у овом случају циљамо кутове кутије. Ова особина ће заправо прихватити 1 - 4 вриједности и свака од њих циља на различита подешавања углова.
- 1 валуе: Сва четири угла су заокружена на исту вредност
- 2 валуес: Прва вредност се односи на
горе левоидоле деснодок друга вредност погодиГоре десноиДоњи леви - 3 валуес: Прво се односи на
горе леводруги је обојеДоњи леви&Горе деснодок је трећа и коначна вредност примењена надоле десно - 4 валуес: Све 4 вредности циљају углове у следећем редоследу: горњи леви, горњи десни, доњи десни, доњи леви
/ ** пример ** / див бордер-радиус: 4пк 4пк 8пк 4пк; див бордер-радиус: 4пк 4пк 8пк;
Дакле, у горњем коду користимо бордер-радиус да примените заокружен ефекат 4пк на све осим на доле десно граница која добија заглађену криву од 8 пиксела. Ако сте то приметили, оба ова кода ће заправо применити исти ефекат стила.
Компатибилност међу претраживачима
Сада је главни проблем то бордер-радиус подржава само неколико претраживача. Интернет Екплорер 9 је недавно додао велику подршку, а Опера ће и ово приказати. Међутим, чак је и Опера створила своју имовину -о-бордер-радиус циљање њиховог специфичног мотора претраживача. Додатно -моз-бордер-радиус је подржан од стране Фирефок / Гецко софтвера и -вебкит-бордер-радиус за Гоогле Цхроме / Сафари.
Шифра испод је пример мог шаблона за креирање заобљених углова са највећом подршком за глобални претраживач.
див бордер-радиус: 4пк 4пк 8пк 4пк; -вебкит-бордер-радиус: 4пк 4пк 8пк 4пк ;; -моз-бордер-радиус: 4пк 4пк 8пк 4пк; -о-бордер-радиус: 4пк 4пк 8пк 4пк;
Фанци а Дроп Схадов?
Други заиста страшан аспект ЦСС3 је подршка за бок и тект схадовс. Ово је био проблем за програмере у прошлости, јер су позадинске слике биле једина реална опција. Ова синтакса заправо прати скраћену улогу која је много лакша од других својстава које смо покрили. У почетку је тешко запамтити правилан редослед кључних вредности - али што више праксе унесете, то ће лакше постати.
Нажалост, Интернет Екплорер је опет чудан. Сваки други главни претраживач, укључујући Фирефок, Гоогле Цхроме, Сафари и Опера, у потпуности подржава тект-схадов својство. Програмери су покушали да изграде сопствену ИЕ подршку али су још увек веома ограничавајући. Основна синтакса је написана на следећи начин:
/ ** синтакса ** / тект-схадов: к-оффсет и-оффсет боја замућења-радијуса; / ** пример ** / див тект-схадов: 2пк 2пк 1пк # 111;
Помак Кс и И каже претраживачу колико далеко сјена треба да се појави. Можете користити негативне вредности за позиционирање сенке изнад и изнад леве. Али ово долази од изгледа врло неугодно па препоручујем позитивне интегерс. Исто тако, вриједност полумјера замућења може се користити за глађење крутих рубова, ако се текстуална сјена чини неприродном.
Ова синтакса само гледа у основну нотацију при креирању једног ефекта сјене. Високо напредни дизајнери су проучавали да истовремено стварају више сенки! Овај одличан блог пост од давне априла 2011, који се детаљно описује у наметању текстуалних сенки. Ако имате времена, прегледајте садржај да бисте добили идеју о напреднијим функцијама и обавезно га означите као будућу референцу!
Компатибилност међу претраживачима
Највећи критичар на који наилазимо је Интернет Екплорер. Мицрософт је изнова и изнова избацио свој властити механизам за приказивање претраживача који је у најбољем случају наступао под-пар. Сада чак и када ЦСС3 преузима владавину у текстуалним сјенама, ИЕ је још увијек иза. Постоји одлична демо веб страница на којој можете пронаћи примјере кода и традиционалне ЦСС условне коментаре.
У основи, желите да проверите да ли претраживач који ваш корисник покреће одговара било којој верзији програма Интернет Екплорер 9 или нижој. Затим помоћу МС филтера можемо применити сенку на било који текстуални елемент (изнад, користимо параграф).
Еасинг Транситионс
ЦСС3 прелаз је најтоплија некретнина на тржишту дизајна од бакиних флапјацкова! Веб дизајнери су правили велику фрку око чистих ЦСС прелаза, иако је подршка углавном ограничена на Вебкит претраживаче. Наравно, можете користити секундарне особине за Мозилла и Опера и слично. Али скраћеница је заиста задивљујућа, поготово ако сте против ЈаваСцрипт анимација из било ког разлога.
Прво да погледамо оригинално својство транзиције. То ће захтијевати 4 вриједности које можете и сами разложити на својства. Они одговарају транзицији својство(какав је ефекат), трајање(колико дуго треба извући), функција времена(промене брзине преко анимације), и кашњење(број секунди за чекање пре анимирања).
/ ** синтакса ** / транситион: време трајања функције временског ограничења; / ** пример ** / имг транситион-проперти: опацити; транзиција-трајање: 2с; функција прелазног времена: олакшавање; кашњење у транзицији: 0.5с;
Требало би интуитивно разумети сврху већине ових својстава осим могуће функције времена. Иако је у почетку збуњујуће, ова особина само другачије анимира ваш прелаз тако да се ефекат покрене спорије, заврши спорије или нешто слично.
В3 Школе имају онлине функцију временске функције која садржи све могуће вриједности које можете испробати. Стално проналазим Гооглинг за ове водиче, али они праве такве корисне маркере.
Компатибилност међу претраживачима
Сада дајемо пуну подршку претраживача у игру. Подразумевано је својство транзиције само подржава нове верзије Сафари-ја. Ипак, многи корисници и даље захтевају -вебкит префикс који се односи и на Гоогле Цхроме и сличне моторе за приказивање. Испод је а “финализиран” предложак блока кода Препоручујем да сачувате и користите ако вам је потребна подршка за прелаз од већине веб претраживача.
имг транситион: опацити 2с еаси-ин 1с; -вебкит-транситион: невидљивост 2с једноставност у 1с; / * цхроме, сафари, флоцк * / -моз-транзиција: опацити 2с еасе-ин 1с; / * мозилла + гецко * / -о-транситион: невидљивост 2с једноставност у 1с; / * опера * /
Ефекти текста
Ова некретнина није велика и нећете наћи много веб дизајнера који је користе данас. Али можете користити тект-строке да направите неке заиста уредне ефекте са вашим фонтовима. Вебкит претраживачи као што су Сафари и Цхроме једини су прави присташе ове имовине. Опера и Фирефок имају потешкоћа при приказивању текстуалних објеката са истим обрисима.
/ ** синтакса ** / п -вебкит-тект-строке: видтх цолор; / ** пример ** / п -вебкит-тект-строке: 1пк # 222;
Компатибилност међу претраживачима
Ако осећате потребу за текстуалним ефектима, увек треба да укључите боју резервне копије. Мозилла и Опера могу да прођу, али корисници Интернет Екплорера немају друге опције. Нажалост, ово је једна од новијих ЦСС3 својстава која једноставно није добила довољно подршке од заједнице програмера веб претраживача. Требало би да проведете неко време док се играте са овим одличним веб алатом који је специјално креиран за израду ЦСС3 текстуалних скица.
Димензионисање кутија
Својство величине кутије даје вам већу контролу над укупном ширином / висином било којег елемента блока. Подразумевано, ширина / висина + граница + маргина + обнављање чине укупну величину оквира. Међутим, коришћење граничног оквира на вашем садржају гура све ваше облоге и маргине унутра да би ширина остала иста. Постоје само две вредности за ово својство, са цонтент-бок што је подразумевано.
див ширина: 550пк; паддинг: 9пк; бок-сизинг: гранични-бок; / * ширина ће остати на 550пк * /
Као што можете замислити, ово ће вам бити корисно у неком тренутку током ЦСС каријере. Облоге и маргине могу бити прави бол и када додате границе, обично губите траг пиксела.
Компатибилност међу претраживачима
Опера и ИЕ 8 подразумевано подржавају ово ново својство. ИЕ7 и доле су заглављени у оквиру за подешавање садржаја ако ваши посетиоци не користе куиркс режим. Једини додатак који би требало да знате о посебно циљаним вебкит и Мозилла покретачким машинама.
див -вебкит-бок-сизинг: бордер-бок; / * Сафари / Цхроме * / -моз-бок-сизинг: бордер-бок; / * Фирефок * / бок-сизинг: бордер-бок; / * Опера / ИЕ8 + * /
Пуре ЦСС3 Цолумнс
Ступци су мало компликовани са ЦСС3 али се могу извршити са минималним кодом. 2 својства на која желите да се фокусирате су цоунт-цолумн и цолумн-гап. Бројање се односи на укупан број колона које желите да примените, док јаз ствара маргину између сваког од њих.
див # цолс број колона: 3; размак у ступцу: 10пк;
У мом примјеру можемо видјети ИД-ове који се користе као контејнер. Унутар смо подијелили див на 3 ступца с размаком од 10пк. Даље можете поставити Ширина колона која се користи за подешавање укупне ширине сваке колоне уместо уноса пуног броја.
Компатибилност међу претраживачима
Све прије ИЕ8 једноставно неће моћи користити ову имовину. Али као што смо видели у сваком примеру, Мозилла и Вебкит нуде своја решења за више претраживача. Ако вам је потребан предложак, погледајте мој мали пример испод:
див # сидебар видтх: 210пк; -моз-цолумн-цоунт: 3; -моз-гап-гап: 7пк; -вебкит-цолумн-цоунт: 3; -вебкит-цолумн-гап: 7пк; број колона: 3; цолумн-гап: 7пк;
Цустом @ фонт-фаце
Мора да сте чули за узбуђење везано за ЦСС3 прилагођене фонтове. Помоћу својства @ фонт-фаце можемо увести вањске стилове фонтова и користити их као и било коју другу обитељ. Синтакса је помало замагљена и морат ћете потрошити неко вријеме како бисте је исправили. Блок за @ фонт-фаце се користи за дефинисање породичног имена, а затим га можете користити у свом породица фонтова својства!
@ фонт-фаце фонт-фамили: 'МиНевФонт'; срц: урл ('Нев_Фонт.ттф'), урл ('Нев_Фонт.еот'); / * Само Интернет Екплорер * / Тако да видите изнад, не циљам никакав специфичан тип фонта, али синтакса је оно што треба да се истиче. Приметите да Интернет Екплорер подржава само .еот типове фонтова, док .ттф и .отф су популарне опције за друге прегледаче. Такође, важно је да схватите да можете слати УРЛ адресе фонтова из директних веза, тј. урл ('хттпс://ввв.хонгкиат.цом/цсс3/фонтс/мифонт.ттф');
Не постоји прави цросс-бровсер проблем са овом поставком јер сви мотори за рендеровање могу анализирати ове типове датотека фонтова. Само запамтите да за ИЕ подршку морате укључити еот верзију као и оригинал. Осјећам да чланак В3 Сцхоолс садржи каталог најважнијих информација које бисте требали провјерити.
Претварање у минијатурни ЦСС
О овој теми се често расправља јер служи за различите сврхе сваког пројекта. С једне стране, веб програмери троше доста времена на писање стилова. Не постоји начин да се шифрира овај тип чистог текста и сакрије га од њушкала очију. Ако покушавате да спречите друге да украду ваш код, најбоље што можете да урадите је да закрпите стилове и уклоните све преломе / размаке линија.
Овај процес се може означити као миниатуризинг код. Генерално, програмери ће написати ЦСС у стандардном формату, а затим уклонити све размаке пре учитавања на веб сервер. Затим имате локалну копију за брзо уређивање, а такође и мању верзију пројекта уживо. Очигледно је да овај метод може бити користан да би се смањило оптерећење странице и задржали отмичари кода.
Веза коју сам поставио изнад која води до Минифи ЦСС има неки сјајни материјал за читање о тој теми. Сајт такође обезбеђује алатку засновану на претраживачу за уклањање таквог размака и враћа кључа из вашег кода. ЦСС Цомпрессор је још једна опција која има једноставан интерфејс који се покреће директно у вашем веб претраживачу. Такође сам чуо добре ствари о Цлеан ЦСС-у, иако никада нисам користио ту апликацију.
Сродне везе
Да бисте наставили да напредујете, обезбедио сам шест практичних линкова из целог Веба. То укључује не само скраћенице него корисне водиче и туторијале за приступ када практикујете овај нови кратки ЦСС код.
- Водич за почетнике за ЦСС3
- ЦСС Схортханд Гуиде
- Да ли користите ЦСС3 на одговарајући начин?
- ЦСС садржај и табела компатибилности претраживача
- ЦСС3 + Прогрессиве Енханцемент = Смарт Десигн
- Комплетан ЦСС / ЦСС3 индекс својстава
Закључак
Потребно је много посвећености и праксе писања ЦСС кода за израду конкретног распореда који можете пратити за сваки пројекат. Већина веб дизајнера радо ће покупити нове пројекте и идеје, тако да ћете сигурно наћи времена да практикујете ове корисне савјете за кодирање. Покушајте да копирате мали референтни лист за вашу удобност у случају да не можете да нађете било какве листове за превару, или још горе што губите везу са Интернетом!
Да ли знате за неке друге корисне ЦСС3 особине или пречице? Волели бисмо да чујемо ваше мисли и идеје у коментарима дискусије. Веб програмери се залажу за већу стандардизацију унутар В3Ц и јасно је да је транзиција постала лакша. ЦСС3 пружа фантастичне предности и ако можете овладати скраћеним кодирањем, то ће задржати ниске величине датотека и спријечити крађе кода.
