Četl to v nějakém blogu ... myslel, že to bylo příjemné pro katalogizaci to pro budoucí čj .... Také by mohly být důležitým rozhovor otázkou, kterou by se zeptal jednoho dne ....
Napište fragment CSS, které se zobrazí v modré odstavec ve starších prohlížečích, červené v novějších prohlížečích, zelené a černé IE6 v IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Měl tento zvláštní problém, kde kus Javascript fungovalo ve všech prohlížeči ANS obvyklé bar IE 
Jednoduché ... to bylo, ale protože scénář nebyl napsán mě, chvíli trvalo, k ladění této "Objekt nepodporuje tuto vlastnost nebo metodu" chyba pouze IE bylo na zvracení. Pravděpodobně! Pokud bych měl napsat scénář, nebyl bych si k této chybě vůbec, protože nemíchejte své názvy proměnných s IDS pole :).
Problém: Objekt nepodporuje tuto vlastnost nebo metodu (na řádku 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Řešení:
Chyba je generován na thirdrow ve výše uvedeném příkladu (linka 3 ... "shortdesc = document.getE ...."). Snažil jsem se o všech druzích hloupé věci, které I dont dokonce stojí za zmínku zde a nakonec hádejte co! jen změnou var shortdesc na něco jiného zbavili chyby. V podstatě! Název proměnné musel liší od fieldID
Re-Cyklistika je Buzzword a ve vývoji webu to znamená neliší. To šetří energii, pokud jde o úsilí!
V průběhu let psaní CSS a vytváření HTML z návrhů, jsem sledoval několik osvědčených postupů, ve snaze ušetřit čas a energii do toho, co běžně termín jako "Re-vynalézat kolo". Znovu a znovu jsem si říkal, že musím vytvořit několik šablon, některé standardní znovu použitelné CSS, které bych použil Z krabice, v mé další práci. I když ne zcela, ale já se podařilo dosáhnout některých cílů.
V podpoře, opětovného použití CSS, musel jsem se podívat na několik rámců CSS, které jsou běžně dostupné na nás a rozhodli se dát je k použití, protože jsou osvědčené a vytvořený hodně zkušených vývojářů a než jsem já. Ještě důležitější je "STYKU znovuobjevování".
I když všeobecně známo, na veterány, jsem se snažil pera některé klíčové pojmy / osvědčené postupy / myšlenky, že odešla do tvorby těchto rámců, aby RE-CYCLING CSS je to možné. Doufám, že to pomůže některé CSS vývojářů, kteří jsou právě v té době a nedávno nastoupil do rozjetého vlaku CSS!
Používejte konvence pojmenování
To musí být nejdůležitějším faktorem při vytváření CSS / HTML znovu použitelný. Dát konzistentní jména na stránku prvků umožňuje opětovné použití stránek složek a jejich styly s málo nebo úpravami. V souladu s tímto argumentem, i HTML5, výraznou změnu změnu v průběhu jeho předchůdci, je zavést nějakou strukturální tagy viz. <article>, <section>, <header>, <aside> a <nav> [ Co bude HTML5 přinese? ]. I s HTML 4 (nebo nižší), je nejlepší pojmenovat standardní části stránky consistanly jako v jednoduchém příkladu dole ...
Pamatujte si, že většina stránek na vašem projektu, skončit mají stejné základní stavební prvky. Identifikovat tyto společné prvky hlavních stránek ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Obnovit výchozí styly (CSS Obnoví): Ať už používáte rámce, nebo napsat vlastní, je nutné zadat CSS Obnoví [ Co jsou CSS Obnoví? ], protože snížení nebo odstranění někdy vizuální nesrovnalosti, které se vyskytují mezi různými prohlížeči. Jednoduše řečeno reset CSS mechanismus nastavuje styly HTML elementu na nulu nebo null hodnot, které nahradí jakákoli hodnoty prohlížeče výchozí mohou představuje. To poskytuje čistý štít pro nastavení vlastností těchto prvků prázdnoty všech User-Agent výchozí [ CSS2.1 User Agent výchozí nastavení stylů ]. Všechny CSS rámce se mají resetu mechanismu. Pokud píšete si vlastní CSS Obnoví, pozor je, že pokud se stane, že zapomenete obnovit klíčovou vlastnost, mohlo by to vést ke cross-browser otázek, které jsou velmi obtížné ladit. Pamatujte si, že Mějte kopii resetu stylů a pustit je do každého nového projektu, který vytvoříte.
tělo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, předem, formulář, fieldset, vstupní, výběr, textarea, p, blockquote, stolní, th, td { hranice: 0px; margin: 0; padding: 0; }
Nastavit výchozí (základní styly) do prvků:
Po nastavení (na nulu nebo null) výchozí hodnoty některých atributů některých prvků HTML, je nutné použít některé styly napříč všemi stupni těchto prvků. Tyto nastavení se může lišit podle návrhu nebo podle osvědčených postupů, které sledujete.
Většina CSS rámců, a to vždy přináší několik nových hodnoty, kromě resetování styly výchozí prohlížeč.
Tyto výchozí hodnoty jsou neplatné z User-Agent výchozích nastavení odstraněný z Obnovit CSS), budou tyto být v rámci prohlížeče.
Pamatujte, že Základní styly slouží k nastavení stylů, které se chystáte použít design-široký. např..
html {font-size: 77%; font-family: Arial, sans-serif;} silný, h1, h2, h3, h4, h5, h6 {font-weight: bold;}
Abstraktní Styly pro HTML společných komponent a společných tříd:
Většina projektů se skládá z několika stran má společné prvky HTML používají v místě, pro např. nějaké upozornění forem, a chyby, vlastní vyskakovací okna a Lightboxy atd. Jelikož tyto komponenty jsou používány znovu napříč projekty, bude užitečné, aby sada tříd spojených s předdefinovanými styly těchto složek a můžete ušetřit spoustu času.
Kromě definování opakovaně styly definice společných HTML komponent, mohli bychom abstraktní styly třídy týkající se typografie, barvy nebo dokonce uspořádání. Já sám jsem spíše použít ... běžné třídy, jako je Clearfix a Font08 a FontGrey a AlignL a DisplayB atd.
Formulář vstup {border: 0px; pozadí: # FFFFFF; padding: 0px 10px; _padding: 0px 0px, výška: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;} Formulář textarea {border: 0px; pozadí: # FFFFFF; color: # 000000; font-size: .9 em, line-height: 1.5em; overflow: visible;} . Fbold {font-weight: bold; color: # CCCCCC;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {jasně: oba;} . Dělič {border-top: 1px solid # 647B06, border-bottom: 1px solid # 9CC00A, výška: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: právo}. Alignc {text-align: střed} . Floatr {float: právo;}. Floatl {float: left;}
Opravy na běžné prohlížeče vtípky
Různé prohlížeče implementovat CSS kódu a poskytují různou úroveň podpory pro specifikaci CSS. Výsledkem toho .... "Prohlížeče Quirks", že my, vývojáři jsou ponechány řešit. Zvláště, IE6 straší většinu CSS kodéry s termínem setkat. Dobrou zprávou je, zkušenosti dohromady možné opakovaně opravy k těmto otázkám (často označováno jako CSS Hacks ).
Pamatujte si, že Udržujte tyto prodejní lidi / opravy ruce
/ * Následující zoom: 1 pravidlo je speciálně určen pro IE6 + IE7. * / * Html. Clearfix, *:. První dítě + html {clearfix zoom: 1; }
Mějte Upřesňování CSS
Konečně. Pokud jste se inspirovat a použít jednu nebo více rámců CSS, Heres je stručný přehled několika populárních ty ....
Pamatujte si, že pomocí CSS rámců neznamená, že jste líní, aby si vytvořte své vlastní ... To znamená, že jste chytří učit se od ostatních zkušeností a chyb, ušetřit čas a zvýšit produktivitu!!
CSS dokončeno 10 let existence tohoto roku! Ti, kteří byli nějakou dobu, si vydělávají na chléb (nebo ne) pomocí CSS, pak byste měli vědomi toho, jak jsme byli hladoví po dobrým výběrem písma. I s nedostatkem písma designéři jako ty, na CSS Zen Garden využili obrázků na pozadí CSS nahradit fonty ve snaze o tom nějakou spravedlnost do svých návrhů. Také jsme se pokusili Flash / JavaScript ® hacky k dosažení našich cílů návrhu. V žádném případě to je špatný způsob, jak dostat fonty jsme žádost do našich návrhů, ale rozhodně není způsob, jak nejvíce žádoucí. a více let web designer, stejně jako já, plně spoléhal na deset nebo tak písma pro jejich provedení.
Poslední vývoj na webových standardů a formátů písem, aby bylo možné učinit HTML text v písmech jiných než stejné výchozí starých písem. Dodává se v "@" fontface decleration CSS.
@ Fontface provids řešení propojení na aktuální fontu a získat jej z webu. Pomocí znak @ fontface mohou návrháři pomocí písma, aniž by museli zmrazit text jako obrázky na pozadí. Implementace je velmi přímočará, jak je uvedeno níže, ale jako všechny dobré věci mají CON část k němu, ne všechny prohlížeče podporují jeden "typ písma". Pokud plánujete používat znak @ fontface v místě s křížovou prohlížeče vyžaduje podporu, pak budete muset poskytnout zdroje pro různé typy písma vedlejší stejné.
Použití znak @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular"; src: url ("CalligraphyFLF.eot '); src: místní ("CalligraphyFLF"), místní ("CalligraphyFLF"), url ("CalligraphyFLF.woff") formát ("woff"), url ("CalligraphyFLF.ttf") formát ("TrueType"), url ("CalligraphyFLF . svg # CalligraphyFLF ") formátu ('SVG'); } @ Font-face { font-family: "Vaše písmo"; src: url ("/ font_filename.eot písma"); src: místní ("Alternativní jméno"), místní ("Alternatename"), url ("/ font_filename.woff písma") formát ("woff"), url ("/ font_filename.otf písma") formát ("OpenType"), url ("Písma / font_filename.svg Č. font_filename") formát ("SVG"); } h2 {font-family: "Vaše písmo", Gruzie, serif;}
Jak můžete vidět z výše uvedeného příkladu, který zahrnuje zvolený font písma, je třeba se odkaz na soubor fonttypes za stejné písmo. Proto lidé se odkazují na to jako "Písmo Kit".
Tam jsou k dispozici sady písma, který výslovně umožňuje propojení s CSS @ font-face vlastnictví k němu na základě licenční smlouvy s koncovým uživatelem (EULA).
Užitečné WebFont zdroje:
Se svým omezeným dovednost-set s nástroji jako je Photoshop a Illustrator, mohu upřímně přiznat, že jsem lepší než já developer projektant. Ale moje pozadí s jádrem (server side) vývoj Java / php / COBOL, byl velmi pozitivní vliv na mé UI rozvoji schopností a dovedností. Co chci říct je, při tvorbě svých návrhů, tj. když dělám design, myslím, že o tom, jak může návrh nejlépe převést na HTML a CSS, ale nedělá HTML, CSS, dám myšlenku o backend techniky a vytvářejí poměrně jistý že HTML lze snadno implementovat do XSL smyček nebo PHP Výstřižky atd.
V průběhu let jsem byl hozen na hlavu designů designéry uživatelského rozhraní, které pravděpodobně donot mají ponětí, co je HTML nebo CSS. Všechny ty roky jsem si myslel, že bych požádat o moc, kdybych jen očekávat, že designér, který se snaží shov jeho "nemožné kódem designu krku dolů, aby pochopil, jen trochu, co jeho design by být převedena do. To by pomohlo v pořádku?
Pak jsem narazil na tento příspěvek Dnes ... webové designéry, kteří nemohou kód ... Díky Pane! Jsem jen jedním z mnoha, kteří se cítí stejně ... nad artitle je trochu dlouhá rozvláčný .. ale stojí za čtení, každý slovo.
Díky Elliot Jay Zásoby ... Cítím úlevu!
Zde je několik výňatků z Elliots článku .
Upřímně řečeno, jsem šokován, že v roce 2010 jsem ještě narazil 'WWW designérů, kteří se nemohou kódu své vlastní návrhy. Žádná omluva.
... Já jsem měla být trochu konkrétnější v mém tweetu. Mluvil jsem o projektanty, kteří nemají ani tu nejzákladnější HTML a CSS schopnosti proměnit plochý design do skutečného místa. Ne lidé, kteří se záměrně rozhodnou, že nebudou kódu, ti, kteří nemohou. A já jsem také na mysli pouze front-end kód zde, samozřejmě je to směšné myslet si, že designéři by měl být rovněž úžasné back-end programátoři ...
Dostáváme 'WWW' designy zaslané v Illustratoru, 300 dpi, nemožné do kódu, bez konzistence / použitelnost.
~ Amy Mahon
Je pozdě a já musím zabalit toto nějak. Vím, že tam bude mnoho těch, kteří se mnou nesouhlasí, a mým záměrem není urazit nebo rozrušení někoho, kdo nemohou kód, ale doufám, že část toho, co jsem řekl, odráží některé z bodů, které vždy přijdou, když ponoří do tato debata.
Na konci dne, nemám ztrácet spánek nad tím, kdo může kód a kdo ne. Jsem prostě opravdu překvapen tolik designérů, které nemají front-end dovedností, jak jsem si myslel to minulostí.
Přečtěte si také komentáře, bylo jich tam kolem 320 komentářů, jak jsem napsat ... že stojí za to číst.
Přečtěte si prosím Elliots plné post zde .. Web návrháři, kteří nemohou zakódování
Vzhledem k tomu, přepínač a text jsou in-line, takže text zarovnat sebe na spodní straně přepínač, bude se text jeví jako mírně pod přepínači.
Pokud si chcete tyto sladit na vrchol, budete muset umístit rádio a text do samostatných nádob, jako tagů nebo přesahuje (podle potřeby) a oni se postarají o vyrovnání. Bylo by jednodušší použít buňky tabulky i vašeho návrhu stručný dovolí.
To nebude vypadat stejně v každém prohlížeči, protože každý prohlížeč zobrazí rádia trochu jinak, tak tam vždycky bude velikost problémy bez ohledu na to, co děláte.
HTML5 je stále návrh. Jak píšu, práce na HTML 5, které byly zahájeny v roce 2004, ještě je utvářelo na základě společného úsilí mezi W3C HTML WG a WHATWG . Slovo je to, že příští gen HTML bude mít vylepšení a funkcí, které by nová struktura a sémantika, ovládací prvky formuláře, API, multimédia tagy atd..
V jednoduché angličtině ... co by to znamenalo pro nás vývojáři uživatelského rozhraní ...
<body> <header> ... </ header> <nav> ... </ NAV> <article> <section> ... </ Sekce> </ Článek> <aside> ... </ stranou> <footer> ... </ zápatí> </ Body>
Místo
<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>
např.
<video poster="poster.jpg"> <Source src = "video.3gp" type = "video/3gpp" média = "handheld"> <zdroj src="video.mp4" type="video/mp4"> </ Video> <audio> <zdroj src="music.oga" type="audio/ogg"> <zdroj src="music.mp3" type="audio/mpeg"> </ Audio>
Existuje mnoho dalších změn a upgrady na novou verzi ... Bude mít aktualizovat tento post, jak jsem přišel naproti přes nějaké ty zajímavé užitečné .... Na tomto místě
Tento dokument nemusí poskytovat přesné informace, jak HTML 5 specifikaci je stále aktivní ve vývoji. Pokud si nejste jisti, vždy zkontrolujte specifikaci HTML 5 zde .
Čas a znovu, když všechny ostatní prohlížeče vidět, jak se chovat řekl podle pravidel W3C, tedy spirály vás z vývoje ducha tím, že hodí vztek, že se nezdá, že má opravu. Jen takový člověk je tento problém v IE7.
Problém prohlášení:
Já, a tak mohla mnoho z jiných vážných webových vývojářů si všimli více než mnohé časy, že když tam vložený plováky v rozvržení, na vznášet se nad některými odkazy (kotvicí tagy), obsahující kontejner zdá posunout o pár pixelů vpravo . Snažil jsem se google řešení tohoto problému, ale těžko najít jakoukoliv rozumnou odpověď, proč a kdy k ní dojde (to by mohlo pomoci zabránit tomuto problému děje), a proto jsem nikdy nenašel jednoznačné řešení problému buď ...
Možné řešení:
Ze zkušenosti, mám upozornění 90% procent z časů, tj., že tento problém je vyřešen tím, že přidá zoom majetek v definici CSS na mis-chová kontejneru ...
# {Somediv zoom: 1; }
opět důvody jsou nejasné ... zkuste to ...
Některé prvky v IE mají "hasLayout" vlastnost, která je "pravda" ve výchozím nastavení. Mnoho vizuální CSS chování, například alfa filtr pracuje pouze na prvek, který hasLayout. a {zoom: 1} Zdá se, že dát zaměřující se na prvky na hasLayout vlastnost .... Užitečné? I dont, že ano ...
Zoom vlastnost je také vypadá, že podporuje Chrome, ale jeho použití dint Zdá se, že velký negativní vliv na mé dispozice ... zkuste to, když to funguje u vás ... pokud se tak nestane, záložku této stránky v kostky "CSS"
Včera, po vydání jsem se setkala s CSS resetů ve prohlížeče Google Chrome ... Myslel jsem kopat trochu hlouběji do oblasti uživatelských listů Agent styl ...
Našel tuto tabulku na výchozí hodnoty CSS2.1 uživatele listy Agent styl ... (pro ty, kteří neví o co "User Agent Style Sheets, je následovat Co je Uživatel listy Agent Style (specifikace) .
Pro úplný seznam CSS 2.1 User Agent výchozí stylů klikněte zde
