Ако прочетете тази в някои блог ... мислех, че е хубаво да каталогизирате това за бъдещото Ref .... също би могло да бъде важен въпрос за интервю, че ще попита някой ден ....
Напишете фрагмент на CSS, който ще покаже един абзац в синьо-стари браузъри, червено в по-новите браузъри, зелено в IE6 и черно в IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Този странен въпрос, където едно парче на Javascript работи добре в всички браузъра АНО, както обикновено бар, т.е. 
... Просто беше, но тъй като скриптът не е написана от мен, това отне известно време за коригиране на грешки в тази "грешка" Обектът не поддържа това свойство или метод, че само IE е хвърляне. Вероятно! Ако трябваше да напише сценария, аз няма да имам тази грешка на всички, за да не се смесват моите имена на променливи с област IDS :).
Проблем: Обектът не поддържа това свойство или метод (он-лайн 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Решение:
Грешката е генерирана на thirdrow в примера по-горе (линия 3 ... "shortdesc = document.getE ...."). Опитах сортиране на всички глупави неща, че аз съм се струва дори се споменава тук и най-накрая познайте какво! просто смяна на VaR shortdesc към нещо друго се отървете от тази грешка. По принцип! Името на променливата трябва да се различава от на fieldID
Re Колоезденето е Buzzword и в разработването за Уеб означава, че няма по-различно. Това пести енергия, по отношение на усилия!
През годините на писане на CSS и създаване на HTML от дизайн, аз следват няколко най-добри практики, в стремежа за спестяване на време и енергия в това, което обикновено мандат като "преоткриването на колелото". Отново и отново, аз си казах, че аз трябва да създадете няколко шаблони, някои стандартни повторното използване на CSS, че ще използва от кутията в бъдещата ми работа. Макар и не напълно, но успя да постигне някои от цели.
За по-нататъшното, повторна употреба на СГО, имах един поглед към малкото рамката на CSS, които често са на разположение за нас и реши да ги пуснат в употреба, тъй като те са изпитани и тествани и създадени от много по-опитни разработчици, отколкото себе си. По-важното е "Избягвайте преоткриването".
Макар общ знания за ветерани, са се опитали да напишат някои ключови понятия / най-добрите практики / мисли, че е отишло в създаването на тези рамки, за да направи възможно RE-Колоездене на CSS. Надявам се това ще помогне на някои CSS разработчици, които са на път да и наскоро се качили на банда CSS!
Използвайте именуване конвенции
Това трябва да бъде най-важният фактор при вземането на повторното използване на CSS / HTML. Даване последователни имена на елементи от страницата дава възможност за повторно използване на на страница компоненти и техните стилове, с малко или модификации. В съответствие с този аргумент, дори и HTML5, в голяма промяна на повече от своите предшественици, е да се въведат някои структурни, а именно тагове. <article>, <section> <header>, <aside> и <nav> [ Какво ще на HTML5 донесе? ]. Дори и с HTML 4 (или по-ниска), най-добре е да назовем стандартни секции на вашата страница consistanly като в прост пример по-долу ...
Не забравяйте, че повечето страници на вашия проект, в крайна сметка като едни и същи основни структурни елементи. Идентифициране на тези общи основни елементи на страницата ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Проучване по подразбиране стилове (CSS Връща): Независимо дали използвате рамка или напишете своето собствено, трябва да предоставите CSS Връща [ Какви са CSS Връща? ], тъй като те намаляват или понякога елиминира визуални несъответствия, които се случват между различните браузъри. С прости думи механизма за Reset CSS определя стила на HTML елемент нула или нула ценности, така да се заобиколи никакви стойности на браузъра по подразбиране, те могат да поставя. Това осигурява на чисто, за да зададете свойствата на тези елементи лишен от всички User-Agent по подразбиране [ CSS2.1 User Agent стил по подразбиране лист ]. Всички на CSS рамки нямаме на нулиране механизъм. Ако пишете собствен CSS Връща една дума на предпазливост е, че ако се случи да забравим, за да възстановите ключова собственост, това може да доведе до различни браузъри въпроси, които са много трудни за дебъгване. Не забравяйте, че се съхранява копие на Ресет стилове и ги пуснете във всеки нов проект, който създаде.
тялото, DIV, DL, DT, DD, ул., ол, LI, H1, H2, H3, H4, H5, H6, PRE, форма, fieldset, вход, изберете, текстовото поле, P, Текстов блок, маса, ти, TD { граница: 0px; граница: 0; подложка: 0; }
Комплект подразбиране (Базови стилове) с елементи:
След като сте настроили (до нула или нула) стойностите по подразбиране на някои атрибути на някои HTML елементи, е необходимо да се прилагат някои стилове, във всеки случай, от тези елементи. Тези настройки по подразбиране може да варира според дизайна или според най-добрите практики, които следвате.
Повечето рамки, CSS, винаги въвежда някои нови стойности по подразбиране, в допълнение към възстановяване стилове на браузър по подразбиране.
Тези подразбиране е лишен от User-Agent по подразбиране (махнати от Reset CSS), те ще бъдат в съответствие различни браузъри.
Не забравяйте, че базовите стилове се използват, за да зададете стилове, които се използват, са дизайн. например.
HTML {шрифт с размер: 77%; шрифт семейство: Arial, безсерифен;} силен, H1, H2, H3, H4, H5, H6 {шрифт тегло: получер;}
Абстрактни стилове за общи HTML Компоненти и общи класове:
Повечето проект, състоящ се от няколко страници ще имат общи HTML елементи, използвани в сайта, например някакъв вид на форми, предупреждения и грешки, потребителски изскачащи прозорци, лайтбокса т.н. Тъй като тези компоненти се използват отново през проекти, това ще бъде полезно да се осигури набор от класове, свързани с предварително зададени стилове за тези компоненти и можете да си спестите много време.
Освен определянето на определения за многократна употреба стилове за общите HTML компоненти, бихме могли да абстрактни класове стилове, отнасяща се до типография, цвят или дори оформление. Аз себе си са склонни да използват ... общи класове като Clearfix, Font08 FontGrey, AlignL, DisplayB др.
формуляр за въвеждане на {граница: 0px; фон: # FFFFFF; подложка: 0px 10px; _padding: 0px 0px; височина: 26px; цвят: # 000000; линия-височина: 30px; шрифт, размер: 1.1em;} форма текстовото поле {граница: 0px; фон: # FFFFFF; цвят: # 000000; шрифт с размер: .9 им; линия-височина: 1.5em; препълване: видим;} . Fbold {шрифт тегло: получер, цвят: # cccccc;} Fgrey {цвят: # 666666;} Flightgrey {цвят: # bbbbbb;} Clearfix {ясно: и двете;} Делител {гранично-нагоре: 1px твърди # 647B06; дъно граници: 1px твърди # 9CC00A; височина: 0px;} . Displayb {дисплей: блок;} displayn {дисплей: няма;} Alignr {текст-align: дясно}. Alignc {текст-align: център} Floatr {поплавъка: право;}. Floatl {поплавъка: ляво;}
Поправките на общи странности на браузъра
Различни браузъри прилагане на кода на CSS и осигуряват различна степен на подкрепа за спецификацията на CSS. В резултат на това .... "Браузър странности", че ние, разработчиците са оставени да се справи. Особено, IE6 преследва най CSS програмисти с краен срок да се срещнат. Добрата новина е опит събра възможни за многократна употреба Поправките на тези въпроси (често са наричани като CSS Hacks ).
Помнете, тези хакове / поправки удобен
/ * Увеличение: 1 правило е специално за IE6 + IE7. * / * HTML. Clearfix, * Първо дете + HTML clearfix { увеличение: 1; }
Усъвършенстване Вашият CSS
Най-накрая. Ако сте вдъхновени и възнамерявате да използвате един или повече от рамките на СГО, Ерес е бърз списък на няколко популярни ...
Не забравяйте, че използването на CSS рамки, не означава, че сте мързеливи, за да създадете един от вашите собствени ... Това означава, че сте умен, да се учат от опита и грешките на другите, освен време и да увеличават производителността!!
CSS завършен 10 години съществуване тази година! Онези, които са били наоколо за известно време, изкарва хляба си (или не), използване на CSS, тогава може да знае как ние сме били жадни за добър избор на шрифтове. Дори и с липсата на шрифтове дизайнери като тези в CSS Zen Garden са се възползвали от фонови изображения на CSS, за да замени на шрифтове в преследването на някаква справедливост на техните проекти. Опитали сме се също Flash / JavaScript ® хакове за постигане на целите на нашия дизайн. В никакъв случай това е грешен начин да получите шрифтове, ние желаем в нашите уеб дизайн, но определено не е най-желаният начин. и през годините на уеб дизайнер, като мен, напълно разчита на десетина шрифтове за своите проекти.
Последните развития в уеб стандарти и формати на шрифтове правят възможно да се наеме HTML текст, шрифтове, различни от същите стари шрифтове по подразбиране. Предлага се в "@ fontface" decleration CSS.
_AT_ Fontface provids решение да се свърже към действителния файл на шрифта и да го изтеглите от интернет. Използвайки @ fontface, дизайнерите могат да използват шрифтове, без да се налага да замрази текст като фонови изображения. Изпълнението е много право напред, както е показано по-долу, но както всички хубави неща имат CON част към него, а не всички браузъри поддържат един шрифт ". Ако планирате да използвате @ fontface, в сайт с изискването на кръстосано браузър подкрепа, тогава ще трябва да предостави източници за различни типове шрифт на една и съща.
Използване на @ fontface
@ Шрифт в лице { шрифт семейство: "CalligraphyFLFRegular"; SRC: URL (CalligraphyFLF.eot "); SRC: местни ("CalligraphyFLF"), местни ("CalligraphyFLF"), URL (CalligraphyFLF.woff ") формат (" woff "), URL (" CalligraphyFLF.ttf ") формат (TrueType '), URL (" CalligraphyFLF SVG # CalligraphyFLF ") формат (SVG); } @ Шрифт в лице { шрифт семейство: "Вашият шрифт"; SRC: URL ("шрифтове / font_filename.eot"); SRC: местни ("Алтернативен име"), местен ("Alternatename"), URL ("шрифтове / font_filename.woff") формат ("woff"), URL ("шрифтове / font_filename.otf") формат ("OpenType"), URL ("шрифтове / font_filename.svg на # font_filename") формат (SVG); } h2 {шрифт семейство: "Вашият шрифт", Грузия, Serif;}
Както можете да видите от горния пример, за да се включват избрания шрифт шрифт, човек трябва да се свърже към набор от fonttypes за един и същ шрифт. Ето защо хората се отнасят към него като "Font Kit".
Има шрифтове комплекти, която изрично да позволява да се свързва с CSS @ шрифт в лице имущество по Лицензионно споразумение с краен потребител (EULA).
Полезни ресурси WebFont:
С моя ограничен умения комплект с инструменти, като Photoshop и Illustrator, мога честно да призная, че съм по-добър разработчик, отколкото аз съм дизайнер. Но моята квалификация с ядро (сървър) развитие с Java / PHP / COBOL, е едно много положително влияние върху потребителския интерфейс ми развитието на уменията. Какво искам да кажа е, като същевременно се създава проектите си, т.е. всеки път, когато правя дизайн, аз мисля, за това как дизайнът може да бъде най-добре преобразува в HTML, CSS и докато правите HTML, CSS, давам мисъл за гръб технологии и относително сигурни, че HTML може лесно да бъде внедрен в XSL примки или PHP откъси и др.
През годините съм бил хвърлен главата да дизайн от дизайнерите на потребителския интерфейс, който вероятно donot имат представа какво е HTML или CSS. През всичките тези години аз мислех, че аз ще иска твърде много, ако ви очакват на дизайнера, който се опитва да shov му "невъзможно да се код" дизайн в гърлото ми, да се разбере съвсем малко, какво му дизайн ще бъдат превърнати в. Това ще помогне нали?
Тогава се натъкнах на този пост днес ... уеб дизайнери, които не могат да код ... Благодарение на Господ! Аз съм просто един от многото, които се чувстват по същия ... горе artitle е малко дълъг скучен .. но си струва за четене, всяка дума от него.
Благодаря Елиът Джей запаси ... се чувстват освободени!
Ето някои откъси от Elliots статия .
Честно казано, аз съм шокиран, че през 2010 г. Аз съм все още идват през уеб дизайнери ", които не могат да кодират свои собствени проекти. Не е извинение.
... Аз трябва да съм бил малко по-специфичен в моя чуруликам. Аз говорех за дизайнери, които нямат дори най-основната HTML и CSS умения да се превърне плосък дизайн в самия сайт. Не хора, които умишлено не изберат да се код, тези, които не могат. И също ми се отнасят само до предния край код тук, разбира се това е смешно да се мисли, че дизайнерите трябва да бъде невероятно крайните програмисти ...
Ние се "паяжината" дизайн, изпратени в Illustrator, 300dpi, невъзможно да се код, без съгласуваност / функционалност.
~~ Ейми Mahon
Става късно, и аз имам да приключи този нагоре по някакъв начин. Знам, че ще има много хора, които не са съгласни с мен, и моето намерение не е да обиди или разстрои всеки, който не може код, но се надявам, че някои от това, което казах отразява някои от точките, че винаги, когато дълбаят в този дебат.
В края на деня, аз не губят всеки сън, който може да кодира и които не могат. Аз съм просто истински изненадан да намерят толкова много дизайнери, които нямат предния край умения, тъй като мислех, че това е нещо от миналото.
Също така прочетете коментарите, имаше около 320 коментара, както аз пиша ... те са си струва да прочетете.
Моля, прочетете Elliots целия пост тук .. уеб дизайнери, които не могат да кодират
Тъй като радио бутон и текстът са вграден, така че текстът ще се изравни до дъното на радио бутона, на текстът ще се появи, да бъде малко под радио бутона.
Ако искате те да се приведат до върха, ще трябва да поставите радио и текст в отделни контейнери, като DIV секциите или се разпростира (според случая) и те ще се погрижат за привеждане в съответствие. Би било по-лесно да се използват клетки на таблица, на вашия проект кратко го позволява.
Това няма да изглежда по същия начин във всеки браузър, като всеки браузър показва радио малко по-различно, така че винаги ще бъдат размерите въпроси, без значение какво правите.
HTML5 все още е проект. Докато пиша, работят на HTML 5, които са започнали през 2004 г., все още се дава форма от съвместните усилия между W3C HTML РГ и WHATWG . Думата е, че следващото поколение HTML ще има подобрения и функции, които новата структура и семантика, елементи за управление, Апис, мултимедия и т.н. тагове.
На прост английски ... какво би означавало да се нас потребителския интерфейс на разработчиците ...
<body> <header> ... </ хедър> <nav> ... </ НСА> <article> <section> ... </ Раздел> </ Статия> <aside> ... </ настрана> <footer> ... </ долен колонтитул> </ BODY>
Вместо
<body> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div class="article"> <div class="section"> ... </ Div> </ Div> <div id="aside"> ... </ div> <div id="footer"> ... </ div> </ BODY>
например
<video poster="poster.jpg"> <Източник SRC = "video.3gp" тип = "video/3gpp" медиите = "Handheld"> <source src="video.mp4" type="video/mp4"> </ Видео> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </ Аудио>
Има много повече промени и ъпгрейди към по-новата версия ... ще продължи да актуализира този пост, тъй като идвам accross някакви интересни полезни .... Гледайте това пространство
Този документ не могат да предоставят точна информация, като HTML 5 спецификацията е все още активно в развитието. Когато се съмнявате, винаги проверявайте HTML 5 спецификацията тук .
Час и отново, Когато всички други браузъри, виждал да се държат, както е казано от правилата на W3C, т.е. вие излязло от развитието на духа чрез хвърляне гневно избухване, това не изглежда да има корекция. Точно такъв човек е този въпрос в IE7.
Проблем изявление:
Аз и това може да сте забелязали, много от другите сериозни уеб разработчици повече от много пъти, че когато има вложени плува в оформлението, за Задръжте показалеца върху някои връзки (ANCHOR тагове), съдържащо контейнер изглежда да се пренастрои на няколко пиксела надясно . Аз се опитах решения на Google за този въпрос, но едва ли са намерили всеки разумен отговор защо и когато това се случи (което може да помогне да се предотврати този проблем да се случи), следователно аз никога не са намерили ясно решение на проблема или ...
Възможно решение:
На опит, имам предизвестие 90% на времето, т.е., че този въпрос е определена от добавяне на увеличение имоти в CSS определението на погрешно поведение контейнер ...
# Somediv { увеличение: 1; }
отново причините са двусмислени ... Опитайте това ...
Някои елементи в IE "hasLayout" имот, който по подразбиране е "истинска". Много визуални поведение на CSS, например алфа филтър работи само върху един елемент, която hasLayout. {Zoom: 1} и изглежда да се даде на целевите елементи, hasLayout собственост .... Полезна? Аз не мисля така ...
Увеличение имот е също изглежда се поддържа от Chrome, но използването му удар изглежда да направи много по-неблагоприятен ефект върху моята оформление ... го опитате, ако тя работи за вас ... ако това не стане, Запомнете тази страница в "игра на зарове на CSS"
Вчера, след издаване, се сблъсках с CSS Връща в Google Chrome ... Мислех, че на изкопни работи малко по-дълбоко в областта на Потребителски агент Стил листове ...
Открили тази таблица на стойности по подразбиране на CSS2.1 Потребителски листа брокер стил ... (за тези, които знаят какво е "Потребителски листове агент стил", е да следвате Какво е Потребителски листове агент стил (спецификация) .
За пълния списък на CSS 2.1 Потребителски агент Стил листове по подразбиране, натиснете тук
