Читао ово у неком блогу ... мислио да је лепо каталог ово за будуће реф .... Такође би могао да буде важан интервју питање да би сте се питали неки дан ....
Напишите фрагмент ЦСС која ће се приказати пасус плавим старијим прегледачима, црвена у новијим бровсерима, зелена у ИЕ6 и ИЕ7 у црној
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Ре-Билијар је и Буззворд У Веб развој значи не разликује. То штеди енергију, у смислу напора!
Током година писања ХТМЛ ЦСС и стварање од дизајна, ја сам пратио неколико најбољих пракси, у потрази за уштеде време и енергију у оно што обично термин као "поновно измишљање тхе Вхеел". Време и време опет, ја сам себи рекао да морам да створи неколико шаблоне, неки стандардни поново употребљив ЦСС да бих ја користим оут оф тхе бок у мом будућем раду. Иако не у потпуности али сам успео да остварим неке од циљева.
У даљем, Поновно коришћење ЦСС, имао сам поглед на неколико ЦСС оквирима који су обично на располагању за нас и одлучио да стави их да користе, јер су то покушао и тестирани и створио много искусних програмера и од мене. Што је још важније "Избегавајте РЕ-измишљањем".
Иако је познато да се ветеранима, покушао сам да оловком неки кључни концепти / најбоље праксе /-мисли да је отишао у стварању ових оквира, да би од Ре-Билијар ЦСС могуће. Надам се да ће то помоћи неким ЦСС програмерима који су само о томе да и недавно се укрцали на воз ЦСС!
Користите конвенције именовања
То мора да буде најважнији фактор у доношењу ЦСС / ХТМЛ поново употребљива. Давање конзистентна имена странице елементима омогућава поновну употребу страница компоненти и њихових стилова са мало или модификацијама. У складу са овим аргументом, Чак ХТМЛ5, у велике промене промене односу на своје претходнике, јесте да се уведу неке структуралне ознаке јест. <артицле>, <сецтион>, <хеадер>, <асиде> и <нав> [ Шта ће донети ХТМЛ5? ]. Чак и са ХТМЛ 4 (или мање), најбоље је да именујете стандардне делове ваше странице цонсистанли као у простом примеру ...
Запамтите, већина странице на вашем пројекту, на крају имају исте основне структуралне елементе. Идентификовати ове заједничке елементе основне странице ....
<див ид="цонтаинер"> <див ид="хеадер"> ... </ п> <див ид="нав"> ... </ п> <див ид="сидебар"> ... </ п> <див ид="фоотер"> ... </ п> </ Див>
Ресет Дефаулт стилове (ЦСС Ресетује): Да ли користите оквир или напиши своје, морате обезбедити ЦСС ресетује [ Шта су ЦСС Ресетује? ], јер они смањују или елиминишу понекад визуелне недоследности које се дешавају између различитих претраживача. У једноставним речима ЦСС Поништи механизам поставља стилове ХТМЛ елемент на нула или НУЛЛ вредности, тако највазније било који бровсер подразумеване вредности могу позама. Ово обезбеђује чист шкриљац да подесите својства ових елемената празнине Сваки корисник-агент подразумеване вредности [ ЦСС2.1 Усер Агент стилска Дефаултс ]. Сви ЦСС оквири немамо механизам за ресет. Ако пишете вам сопствени ЦСС ресетује, реч опреза је да ако се деси да заборавите да поново кључну особину, то би могло довести до унакрсно претраживача питањима, који су веома тешко дебуг. Запамтите, чувајте копију ресет стилова и спусти их у сваком новом пројекту који креирате.
тело, див, дл, ДТ, ад, ул, ол, Ли, Х1, Х2, Х3, Х4, Х5, х6, унапред, облик, ФИЕЛДСЕТ, улаз, изаберите, тектареа, П, блоцккуоте, сто, ти, ТД { бордер: 0пк; маргин: 0; паддинг: 0; }
Постави Дефаултс (Основни Стилови) до елемента:
Након што сте подесили (на нулу или НУЛЛ) подразумеване вредности одређених атрибута одређених ХТМЛ елемената, потребно је да примените неке стилове широм сваком степену ових елемената. Ово Подразумевана поставка би могао да мења по пројекту или по најбоље праксе које следе.
Већина ЦСС оквири, увек уводи неке нове подразумеване, поред ресетовању подразумевани прегледач стилове.
Ове подразумеване као празнину на Корисник-Агент подразумеване вредности (откинула од стране ЦСС ресет), то ће бити уједначена у свим бровсерима.
Запамтите, Основни стилови се користе да подесите стилове који се користе иду дизајн света. нпр.
хтмл {фонт-сизе: 77%; фонт-фамили: Ариал, санс-сериф;} јака, Х1, Х2, Х3, Х4, Х5, х6 {фонт-веигхт: болд;}
Сажетак Стилови за опште и заједничке компоненте ХТМЛ класама:
Највећи пројекат састоји од неколико страна ће имати заједничке ХТМЛ елементе који се користе преко сајта, на пример неке врсте образаца, упозорењима и грешкама, прилагођене Искачући прозори, фасцикле итд Од такве компоненте се користе изнова кроз пројекте, то ће бити корисно да се обезбеди скуп класа повезаних са унапред дефинисаних стилова за ове компоненте и можете себи уштедети доста времена.
Поред дефинисања обновљивих дефиниције стилова за уобичајене ХТМЛ компоненте, можемо апстрактне класе стилови који се односе на типографија, боје или чак и распоред. Ја сам често користите ... заједничке часове попут Цлеарфик и Фонт08 и ФонтГреи и АлигнЛ и ДисплаиБ итд
Образац улаз {бордер: 0пк; бацкгроунд: # фффффф; паддинг: 0пк 10пк; _паддинг: 0пк 0пк; висина: 26пк; цолор: # 000000; лине-хеигхт: 30пк; фонт-сизе: 1.1ем;} Образац Тектареа {бордер: 0пк; бацкгроунд: # фффффф; цолор: # 000000; фонт-сизе: .9 ем; лине-хеигхт: 1.5ем; Преливање: видљиви;} Фболд {фонт-веигхт: болд; цолор: # цццццц;}. Фгреи {цолор: # 666666;}. Флигхтгреи {цолор: # бббббб;}. Цлеарфик {јасан: обоје;}. Преграда {бордер-топ: 1пк солид # 647Б06; бордер-боттом: 1пк солид # 9ЦЦ00А; висина: 0пк;}. Дисплаиб {дисплаи: блоцк;} дисплаин {дисплаи: ноне;}.. Алигнр {тект-алигн: ригхт}. Алигнц {тект-алигн: центер}. Флоатр {флоат: ригхт;} флоатл.. {Флоат: лефт;}
Решења за уобичајене куиркс претраживача
Различити прегледачи имплементира ЦСС код и пружају различит ниво подршке за ЦСС спецификацијама. Резултат тога .... "Бровсер Куиркс", који су ми остали програмери да се позабави. Посебно, ИЕ6 прогања највише ЦСС кодере са роком да се састане. Добра вест је искуство је окупила могуће обновљивих решења за ова питања (често назива као Хацкс ЦСС ).
Запамтите, фотографије ове хацкс / грешке при руци
/ * Зум следеће: 1. правило је специјално за ИЕ6 + технологијама ИЕ7. * / * ХТМЛ цлеарфик. *:. Прво дете + ХТМЛ цлеарфик { зум: 1; }
Кееп Иоур ЦСС Рефининг
Коначно. Ако су инспирисани и намеравате да користите једну или више оквира ЦСС, Херес је кратка листа од неколико популарних оне ....
Запамтите, користећи ЦСС оквире не значи да сте лењи да направите сопствени ... То значи да сте паметни да уче од других искуства и грешке, штеде време и повећавају продуктивност!
ЦСС завршен 10 година постојања ове године! Они који су око за неко време, зарађују свој хлеб (или не) користећи ЦСС, онда сте можда свесни колико смо били гладни за добар избор фонтова. Чак и са недостатком фонтова дизајнери попут оних у ЦСС Зен Гарден су искористили ЦСС бацкгроунд слика да замени фонтове у потрази за радиш неке правду у своје дизајна. Такође смо покушали Блиц / ЈаваСкрипт ® Хацкс да остваре своје циљеве дизајна. Никако то је погрешан начин да добијете фонтове желимо у нашим веб дизајна, али дефинитивно, није најпожељнији начин. и годинама веб дизајнера, попут мене, нису у потпуности ослањали на десетак фонтова за своје дизајна.
Недавна збивања у веб стандарде и формате фонтова омогућавају да се донесе текст у ХТМЛ писама другим од истих старих подразумеваних фонтова. Испоручује се у "@" фонтфаце ЦСС децлератион.
@ Фонтфаце провидс решење да се повеже са стварном датотеком фонта и преузели га са Интернета. Користећи @ фонтфаце, дизајнери могу да користе фонтове без потребе да се замрзне текст као позадинске слике. Имплементација је врло равно напред, као што је приказано у наставку, али као све добре ствари имају ЦОН део на њега, нису сви прегледачи подржавају једну врсту "фонт". Ако планирате да користите @ фонтфаце на сајту захтева цросс-бровсер подршке, онда ће морати да обезбеди изворе за различите типове-фонт исто.
Коришћење @ фонтфаце
@ Фонт-фаце { фонт-фамили: 'ЦаллиграпхиФЛФРегулар'; срц: урл ('ЦаллиграпхиФЛФ.еот'); срц: локални ('ЦаллиграпхиФЛФ'), локална ('ЦаллиграпхиФЛФ'), урл ('ЦаллиграпхиФЛФ.вофф') Формат ('ВОФФ'), урл ('ЦаллиграпхиФЛФ.ттф') Формат ("труетипе"), урл ('ЦаллиграпхиФЛФ . СВГ # ЦаллиграпхиФЛФ ') Формат (' СВГ '); } @ Фонт-фаце { фонт-фамили: "Ваше писмо"; срц: урл ("фонтови / фонт_филенаме.еот"); срц: локални ("Алтернативна име"), локални ("Алтернатенаме"), УРЛ ("фонтови / фонт_филенаме.вофф") Формат ("ВОФФ"), УРЛ ("фонтови / фонт_филенаме.отф") Формат ("ОПЕНТИПЕ"), УРЛ ("фонтови / фонт_филенаме.свг # фонт_филенаме") Формат ("СВГ"); } Х2 {фонт-фамили: "Ваше писмо", Грузија, сериф;}
Као што можете видети из горе наведеном примеру, да укључи изабрани писма фонта, један мора да се повежу са скупом фонттипес за исти писма. Дакле људи се односе на њега као "Фонт Кит".
Постоје Фонт доступни Сетови који експлицитно дозвољава повезивање са ЦСС @ фонт-фаце својине на њу у оквиру уговора крајњег корисника лиценцирању (ЕУЛА).
Корисни ВебФонт ресурси:
Време и изнова, када се сви други претраживачи виде да се понашају како је рекао од стране В3Ц правилима, односно вама спиралама ван развојног духа бацањем тантрум, да не изгледа да има закрпу. Само што је ово један проблем у ИЕ7.
Проблем Изјава:
Ја и тако можда многи од других озбиљних веб програмере сте приметили више него много пута, да када постоји каква нестед у распореду, на ховер преко неке везе (сидро тагова), који садржи контејнер изгледа да се помери неколико пиксела на десно . Покушао сам да гоогле решења за овај проблем, али су тешко наћи било какав разуман одговор зашто и када се појави (која би могла помоћи да се спречи овај проблем из дешава), па никад нисам ни наћи јасну решење проблема ...
Могуће решење:
Из искуства, имам обавештење 90 одсто одсто пута, односно, да се ово питање је фиксирана додавањем зумирања имовину у ЦСС дефиницији погрешно понашају контејнеру ...
# Сомедив { зум: 1; }
опет разлози су нејасни ... пробајте ово ...
Неки елементи у ИЕ имају "хасЛаиоут" имовине, која је "истина" по дефаулту. Многи визуелни ЦСС понашања, на пример, алфа филтера ради само на елемент који хасЛаиоут. и {зум: 1} Изгледа да циљних елемената имовину хасЛаиоут .... Користан? И донт тхинк со ...
Зум имовина се такође чини да подржава Цхроме, али је његова употреба чини напор да се много негативан ефекат на мом распореду ... пробајте, ако то ради за вас ... ако се то не деси, Обележите ову страницу под "ЦСС Црапс"
Јуче, после емисије сам наишао са ЦСС ресетује у Гоогле Цхроме-а ... Мислио сам да од копа мало дубље у област Агенција Стиле Схеетс корисника ...
Пронађено ову табелу на подразумеване вредности ЦСС2.1 корисника Агенција Стиле Схеетс ... (за оне који су свесни шта "Усер Агент Стиле Схеетс" је пратити Шта је Усер Агент Стиле Схеетс (спецификација) .
За комплетну листу ЦСС 2.1 усер агент стилски подразумеване кликните овде
Јуче, као и свака друга "Дан Копнене Хог", радио сам на неким ЦСС / Таблелесс распореда. Све је добро иде у ИЕ 7, ФФ и Цхроме 3, До изненада, видела сам неке УН-игнорабле маргине види само у Гоогле Цхроме. Иако је веома чудно и ворринг, то је нека нова грешка / проблем који сам дошао аццросс, коначно постоји неки зачин у мом раду световног. Саду (али леп) добила је фиксиран у року од неколико минута сонде ...
У суштини, изгледало је као Гоогле Цхроме игнорисао моју ЦСС ресетује (маргина: 0пк). То је заправо изазвана стилова корисника агента (ВебКит-бордер-Старт: 40пк). Дакле, решење је да вратите овај стил постављањем паддинг: 0 лоше понаша и елемената.
Добар начин да се спречи овај проблем из дешава на било који елемент је користити глобалну ЦСС Одмор на следећи начин
* {Маргин: 0; паддинг: 0;}
Шта је Усер Агент Стиле Схеетс (спецификација)?
Следећи одломак је узет из хттп://меиерт.цом/ен/блог/20070922/усер-агент-стиле-схеетс/~~ХЕАД=побј , следите линк да прочитате више о Усер Агент Стиле Схеетс
ЦСС 1 уводи идеју наводећи да ће сваки корисник агента (УА, често 'Веб бровсер' или 'Веб клијент ") имају лист подразумевани стил који представља докумената на разуман - али вероватно овоземаљско - начин. ЦСС 2 каже да складу са одговарајућим ЕН кориснички агенти морају да се пријаве лист Дефаулт Стиле (или се понашају као да јесу) и да подразумевани стил корисничког агента лист би требало да представи елементе докумената језика на начин који задовољавају опште очекивања презентацију докумената језику; ЦСС! 3 је вероватно да ће бити истог ума.
Пошто су ЦСС спецификације оставити до имплементације да ли да користе "прави" стила за подразумевани приказ или не, није зачуђујуће да не пронађете лист подразумевани стил у инсталационом фолдеру сваке претраживача. За разлику од Интернет Екплорер компаније Мицрософт, као и Опере, на пример (и колико ја знам), Гецко претраживачи као што су Фирефок и Нетсцапе Навигатор (погледајте за "хтмл.цсс"), али и Конкуерор чини прилично једноставан за схватити њихов подразумевани стил.
Још један брзи тут. Овде је нешто једноставно и лепо Користећи моћ ЦСС ... али је било тешко цонциеве (и то сигурно нисам ја) да се почне са. Додавање Дропсхадов, можда пеице колача за многе од нас, користећи неку слику као што су алатке за обраду Пхотосхоп АНФ Фиреворкс итд
Разлог зашто сам се определила за дроп сенке помоћу ЦСС је да, обично при прављењу странице дизајн / ХТМЛ код апликације, захтеви задржати итератинг. Хоћу да кажем, У постојећем веб сајт са пуно слика, попут оних које приказују фреиндс листу или галерију слика, то ће бити тешко да репроцесс цео оптерећења од слика које су већ истоварени да додате или уклоните сенке, за које ствар.
Дакле, ако сте урадили мало напред размишљања, док стварање ХТМЛС да додате ове додатне дивизије или обично је ситуација да имате петљу логике генерисање ове иконе / сличице у КССЛ, ПХП. ЈАВА или било који други програм / скрипт језик, можете га додати у било које време, онда је само питање емисије и скривао ове сенке помоћу ЦСС Дисплаи имовину, као по клијенте икада мењају услове ... Ја хавн'т урадио ову врсту размишљања напред пре тога ... али ахев почео сада!
У следећем примеру, оригинална слика је сенка бесплатан и дропсхадовс се примењују по потреби! Такође, сам отишао мало више, користећи трикове мог ранијег тут (Велл! ово вероватно најкраће сорта туторијала, тако да је оправдано само називајући их "Тут" 'а) око Коришћење ЦСС Цлип објекат за покажете само
Зашто желим да разумем ово? Хумм ...!
Већина писаца ЦСС сложити да ЦСС цлип имовина је вероватно један од највише коришћених УН-ЦСС својства. Било је тако истина и за мене и био најсрећнији да га занемарују, док нисам почео допунама МооТоолс ДВА дугме (ПИН) клизача компоненту са опсега степена) .
Постојао је добар предлог једног од саставних корисницима да измените компоненту клизача користећи поткресаног бацкгроуд слике (против променљиве ширине поделе) да укаже на опсег клизача. Тако је дошао мој тренутак да уђу у забавно, али УН-овлашћених (за мене наравно) воде на ЦСС Цлип имовине.
Добро! Колико тешко може бити? Није уопште много ... ДА и НЕ. Синтакса за коришћење ЦСС Цлип имовине је веома усправно, али значење / усуаге је мало црооцкед. Са меморијом као што је моја, несто сам да седим обрадом на мом клизачем скрипте ... Имам токееп мислећи назад на коришћење овај клип имовине, да се подсетим логику да сам створио, у мом писму .... Отуда! Сматра се да оловком га, са надом да запамтите да будућност (као и за добробит оних који су изгледа запањен по ЦСС Цлип имовини)
Шта ЦСС цлип ради?
Клип је део визуелне ефекте модулу ЦСС 2.1. Једноставно речено, њен задатак је да ставите видљив прозор на врху објекта која се прикачен, па цлиппинг фотографија и креирање сличице, без потребе да креирате додатне датотеке (што сам већ ставио ову функцију да боље употреби на клизачу компоненте 
)
Коришћење ЦСС Цлип имовине, можете да креирате исечак користећи рецт облик. Као и многе друге ЦСС својства (као маргина, Преграда итд), користећи рецт захтева четири координате врх, десно, доле, лево (ТРБЛ). Црооцкед природа овог имовине одражава када изблиза погледате снимак како се израчунава клипинга регион, помоћу ова четири координате (мозак шаље у жреб за неко време). Сада да вас збуни дно почиње од врха, као и право почиње са леве стране. . Видиш шта сам рекао? .... Дакле овај пост ...
Ова мала конфузија може лако нестати, са овим визуелним објашњење ЦСС Цлип / рецт имовине као испод!
Задатак смо почели да је снимак на следеће сличице у скуарер гледа слике (као и широкоугаони слика)
| |  |
| Оригинални Тхумбнал / Слика | Цлип Захтеви за Скауре Тхумбмаил |
Пре него што смо имали да се носе са ЦСС-ом да креирате своје распореде странице, усклађивању неки садржај унутар ћелије табеле изгледало само дечија игра. Једноставно подесите "алигн" или "валигн" власништво табеле да имају поравнање по вашем избору, комад торте!
Са ЦСС распореда, мада имамо "вертицал-алигн" имовину за елементе, не изгледа да буде једноставно као "алигн" или "валигн" својстава. Да би више специфииц "вертицал-алигн" никада не изгледа да реши ниједан од ваших проблема, посебно ако се напише комад крос-бровсер ЦСС.
Без коришћења ХТМЛ табела, ПРОБЛЕМ центрирање на објекту, било да слика или неки текст који садржи унутар поделе, вероватно је био сваки УИ / ЦСС програмери ноћна мора у неком тренутку. Овај проблем додатно ектраполатес ваше бриге о усклађивању, ако објекат да буде центриран је динамичан у природи, односно када је њена висина је променљива (непозната висина).
Иако не постоји познати равно напред решење које ће радити преко опсега претраживача морамо бавити, решење које сам покушао да дође изгледа да раде у неколико прегледачима које сам пробао у (ИЕ6, ИЕ 7 , фф).
РЕШЕЊЕ:
У прегледачима као што су Мозилла, Опера и Сафари и чудно се понаша "вертицал-алигн" имовина може бити изведени пред својим чулима, једноставно постављање "Екран" имовину која садржи поделе на "стони ћелије" (приказ: табела-ћелија) .
Проблем и даље остаје са ИЕ бровсер породице, који, ипак изгледа да не разуме шта то са "табле-целл" имовине и незналице као што су они, само они га игноришу. Решење дато у наставку, иако једноставне, рекламе неколико ДОМ више елемената у ХТМЛ да би се ствари дешавају.
ЦСС и ХТМЛ изгледа овако
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер">
<див цласс="обј"> <имг срц="имаге1.јпг"/> <бр/> виевс: 3456 </ див>
</ Див>
</ Див>
Резултат изгледа овако: -
видите овде демо се | Довнлоад изворне датотеке (Довнлоадед 452 тимес)
ТОП Поравнај ЦСС
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер_топ">
<див цласс="обј_топ"> <имг срц="имаге1.јпг"/> <бр/> виевс: 1234 </ див>
</ Див>
</ Див>
Резултат изгледа овако: -
БОТТОМ Поравнај ЦСС
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер_боттом">
<див цласс="обј_боттом"> <имг срц="имаге1.јпг"/> <бр/> виевс: 1234 </ див>
</ Див>
</ Див>
Резултат изгледа овако: -
видите овде демо | Довнлоад овде
Изгледа као стари, јер сам покушавао да пронађе разумно решење овог проблема поравнање. Али сада са овим решењем, осећам се мало на миру.
Са надом да Сомедаи
Преузмите ЦСС и ХТМЛ горе наведеног решења овде (Довнлоадед 452 тимес) .. за разумљивост, ЦСС није оптимизована
ПС: И узгред, они су сличице неких слика које сам кликнули ...
ЦСС за не-ИЕ бровсера: Његова Нема вести за ЦСС девелопера који, ЦСС деце Селектори попут следећем примеру, изгледа да не ради у ИЕ.
нпр. див> п {неки цс}, која значи "када див елемент је дете (а не унуче или велико дете велика итд) о подели елемента".
Али смо овом контексту у нашу корист. Историјски гледано, дете селектор је коришћен да сакрије ЦСС команде из ИЕ. Једноставно постављањем html>body испред било ког командног ЦСС ИЕ ће га игнорисати:
html>body .foo { CSS commands go here ;}
То функционише зато <body> је увек дете <html> - може, наравно, никада не буде унуче или праунуче од <html> .
Сада када је ИЕ 7 разуме дете бирач, морате да уметнете празан таг коментар у непосредно након знака веће од ИЕ 7 ће тада неће разумети ову селектор (ко зна зашто?!) И стога ће потпуно игнорисати ову ЦСС команду.:
html> /**/ body .foo { CSS commands go here ;}
Ако већ нису видели ово раније, имају прочитате следеће као
