Čítal to v nejakom blogu ... myslel, že to bolo príjemné pre katalogizáciu to pre budúce čj .... Tiež by mohli byť dôležitým rozhovor otázkou, ktorou by sa spýtal jedného dňa ....
Napíšte fragment CSS, ktoré sa zobrazí v modrej odsek v starších prehliadačoch, červené v novších prehliadačoch, zelenej a čiernej IE6 v IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Mal tento osobitný problém, kde kus Javascript fungovalo vo všetkých prehliadači ANS obvyklé bar IE 
Jednoduché ... to bolo, ale pretože scenár nebol napísaný ma, chvíľu trvalo, k ladenie tejto "Objekt nepodporuje túto vlastnosť alebo metódu" chyba iba IE bolo na zvracanie. Pravdepodobne! Ak by som mal napísať scenár, nebol by som si k tejto chybe vôbec, pretože nemiešajte svoje názvy premenných s IDS pole :).
Problém: Objekt nepodporuje túto vlastnosť alebo metódu (na riadku 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Riešenie:
Chyba je generovaný na thirdrow vo vyššie uvedenom príklade (linka 3 ... "shortdesc = document.getE ...."). Snažil som sa o všetkých druhoch hlúpe veci, ktoré I dont dokonca stojí za zmienku tu a nakoniec hádajte čo! len zmenou var shortdesc na niečo iné zbavili chyby. V podstate! Názov premennej musel líši od fieldID
Re-Cyklistika je Buzzword a vo vývoji webu to znamená nelíši. To šetrí energiu, pokiaľ ide o úsilie!
V priebehu rokov písania CSS a vytváranie HTML z návrhov, som sledoval niekoľko osvedčených postupov, v snahe ušetriť čas a energiu do toho, čo bežne termín ako "Re-vynájsť koleso". Znovu a znovu som si hovoril, že musím vytvoriť niekoľko šablón, niektoré štandardné znovu použiteľné CSS, ktoré by som použil Z krabice, v mojej ďalšej práci. Aj keď nie celkom, ale ja sa podarilo dosiahnuť určité ciele.
V podpore, opätovného použitia CSS, musel som sa pozrieť na niekoľko rámcov CSS, ktoré sú bežne dostupné na nás a rozhodli sa dať ich na použitie, pretože sú osvedčené a vytvorený veľa skúsených vývojárov a než som ja. Ešte dôležitejšie je "STYKU znovuobjavovania".
Aj keď všeobecne známe, na veterány, som sa snažil pera niektoré kľúčové pojmy / osvedčené postupy / myšlienky, že odišla do tvorby týchto rámcov, aby RE-Cycling CSS je to možné. Dúfam, že to pomôže niektoré CSS vývojárov, ktorí sú práve v tej dobe a nedávno nastúpil do rozbehnutého vlaku CSS!
Používajte konvencie pomenovania
To musí byť najdôležitejším faktorom pri vytváraní CSS / HTML znova použiteľný. Dať konzistentné mená na stránku prvkov umožňuje opätovné použitie stránok zložiek a ich štýly s málo alebo úpravami. V súlade s týmto argumentom, aj HTML5, výraznú zmenu zmenu v priebehu jeho predchodcovia, je zaviesť nejakú štrukturálne tagy viď. <article>, <section>, <header>, <aside> a <nav> [ Čo bude HTML5 prinesie? ]. Aj s HTML 4 (alebo nižšia), je najlepšie pomenovať štandardné časti stránky consistanly ako v jednoduchom príklade dole ...
Pamätajte si, že väčšina stránok na vašom projekte, skončiť majú rovnaké základné stavebné prvky. Identifikovať tieto spoločné prvky hlavných stránok ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Obnoviť predvolené štýly (CSS Obnoví): Či už používate rámca, alebo napísať vlastný, je nutné zadať CSS Obnoví [ Čo sú CSS Obnoví? ], pretože zníženie alebo odstránenie niekedy vizuálne nezrovnalosti, ktoré sa vyskytujú medzi rôznymi prehliadačmi. Jednoducho povedané reset CSS mechanizmus nastavuje štýly HTML elementu na nulu alebo null hodnôt, ktoré nahradia akékoľvek hodnoty prehliadača predvolené môžu predstavuje. To poskytuje čistý štít pre nastavenie vlastností týchto prvkov prázdnoty všetkých User-Agent predvolené [ CSS2.1 User Agent predvolené nastavenie štýlov ]. Všetky CSS rámca sa majú resetu mechanizmu. Ak píšete si vlastný CSS Obnoví, pozor je, že ak sa stane, že zabudnete obnoviť kľúčovú vlastnosť, mohlo by to viesť ku cross-browser otázok, ktoré sú veľmi ťažké ladiť. Pamätajte si, že Majte kópiu resetu štýlov a pustiť ich do každého nového projektu, ktorý vytvoríte.
telo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, vopred, formulár, fieldset, vstupné, výber, textarea, p, blockquote, stolný, th, td { hranice: 0px; margin: 0; padding: 0; }
Nastaviť predvolené (základné štýly) do prvkov:
Po nastavení (na nulu alebo null) predvolené hodnoty niektorých atribútov niektorých prvkov HTML, je nutné použiť niektoré štýly naprieč všetkými stupňami týchto prvkov. Tieto nastavenia sa môže líšiť podľa návrhu alebo podľa osvedčených postupov, ktoré sledujete.
Väčšina CSS rámcov, a to vždy prináša niekoľko nových hodnoty, okrem resetovanie štýly predvolený prehliadač.
Tieto predvolené hodnoty sú neplatné z User-Agent predvolených nastavení odstránený z Obnoviť CSS), budú tieto byť v rámci prehliadača.
Pamätajte, že Základné štýly slúži na nastavenie štýlov, ktoré sa chystáte použiť design-široký. napr.
html {font-size: 77%; font-family: Arial, sans-serif;} silný, h1, h2, h3, h4, h5, h6 {font-weight: bold;}
Abstraktné Štýly pre HTML spoločných komponentov a spoločných tried:
Väčšina projektov sa skladá z niekoľkých strán má spoločné prvky HTML používajú v mieste, pre napr nejaké upozornenia foriem, a chyby, vlastné vyskakovacie okná a Lightbox atď Keďže tieto komponenty sú používané znovu naprieč projekty, bude užitočné, aby sada tried spojených s preddefinovanými štýlmi týchto zložiek a môžete ušetriť veľa času.
Okrem definovania opakovane štýly definícia spoločných HTML komponentov, mohli by sme abstraktné štýly triedy týkajúce sa typografie, farby alebo dokonca usporiadanie. Ja sám som skôr použiť ... bežnej triedy, ako je Clearfix a Font08 a FontGrey a AlignL a DisplayB atď
Formulár vstup {border: 0px; pozadia: # FFFFFF; padding: 0px 10px; _padding: 0px 0px, výška: 26px; color: # 000000; line-height: 30px; font-size: 1.1E;} Formulár textarea {border: 0px; pozadia: # 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 {jasne: obaja;} . Delič {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: stred} . Floatr {float: právo;}. Floatl {float: left;}
Opravy na bežné prehliadače vtipy
Rôzne prehliadače implementovať CSS kódu a poskytujú rôznu úroveň podpory pre špecifikáciu CSS. Výsledkom toho .... "Prehliadače Quirks", že my, vývojári sú ponechané riešiť. Zvlášť, IE6 straší väčšinu CSS kódery s termínom stretnúť. Dobrou správou je, skúsenosti dohromady možné opakovane opravy k týmto otázkam (často označované ako CSS hacks ).
Pamätajte si, že Udržujte tieto predajné ľudí / opravy ruky
/ * Nasledujúci zoom: 1 pravidlo je špeciálne určený pre IE6 + IE7. * / * Html. Clearfix, *:. Prvé dieťa + html {clearfix zoom: 1; }
Majte upresňovanie CSS
Konečne. Ak ste sa inšpirovať a použiť jednu alebo viac rámcov CSS, Heres je stručný prehľad niekoľkých populárnych ty ....
Pamätajte si, že pomocou CSS rámcov neznamená, že ste leniví, aby si vytvorte svoje vlastné ... To znamená, že ste chytrí učiť sa od ostatných skúseností a chýb, ušetriť čas a zvýšiť produktivitu!!
CSS dokončené 10 rokov existencie tohto roka! Tí, ktorí boli nejakú dobu, si zarábajú na chlieb (alebo nie) pomocou CSS, potom by ste mali vedomí toho, ako sme boli hladní po dobrým výberom písma. Aj s nedostatkom písma dizajnéri ako tie, na CSS Zen Garden využili obrázkov na pozadí CSS nahradiť fonty v snahe o tom nejakú spravodlivosť do svojich návrhov. Tiež sme sa pokúsili Flash / JavaScript ® hacky na dosiahnutie našich cieľov návrhu. V žiadnom prípade to je zlý spôsob, ako dostať fonty sme žiadosť do našich návrhov, ale rozhodne nie je spôsob, ako najviac žiaduce. a viac rokov web designer, rovnako ako ja, plne spoliehal na desať alebo tak písma pre ich vykonanie.
Posledný vývoj na webových štandardov a formátov písiem, aby bolo možné urobiť HTML text v písmach iných ako rovnaké východiskové starých písiem. Dodáva sa v "@" fontface decleration CSS.
@ Fontface provids riešenie prepojenia na aktuálne fontu a získať ho z webu. Pomocou znak @ fontface môžu návrhári pomocou písma, bez toho aby museli zmraziť text ako obrázky na pozadí. Implementácie je veľmi priamočiara, ako je uvedené nižšie, ale ako všetky dobré veci majú CON časť k nemu, nie všetky prehliadače podporujú jeden "typ písma". Ak plánujete používať znak @ fontface v mieste s krížovou prehliadača vyžaduje podporu, potom budete musieť poskytnúť zdroje pre rôzne typy písma vedľajšej rovnaké.
Použitie znak @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular"; src: url ("CalligraphyFLF.eot '); src: miestne ("CalligraphyFLF"), miestne ("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ša písmo"; src: url ("/ font_filename.eot písma"); src: miestne ("Alternatívne meno"), miestne ("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ša písmo", Gruzínsko, serif;}
Ako môžete vidieť z vyššie uvedeného príkladu, ktorý zahŕňa zvolený font písma, je potrebné sa odkaz na súbor fonttypes za rovnaké písmo. Preto ľudia sa odvolávajú na to ako "Písmo Kit".
Tam sú k dispozícii sady písma, ktorý výslovne umožňuje prepojenie s CSS @ font-face vlastníctvo k nemu na základe licenčnej zmluvy koncového používateľa (EULA).
Užitočné WebFont zdroje:
So svojím obmedzeným zručnosť-set s nástrojmi ako je Photoshop a Illustrator, môžem úprimne priznať, že som lepší než ja developer projektant. Ale moje pozadie s jadrom (server side) vývoj Java / php / COBOL, bol veľmi pozitívny vplyv na moje UI rozvoju schopností a zručností. Čo chcem povedať je, pri tvorbe svojich návrhov, tj keď robím dizajn, myslím, že o tom, ako môže návrh najlepšie previesť na HTML a CSS, ale nerobí HTML, CSS, dám myšlienku o backend techniky a vytvárajú pomerne istý že HTML je možné ľahko implementovať do XSL slučiek alebo PHP Výstrižky atď
V priebehu rokov som bol hodený na hlavu designov dizajnérmi užívateľského rozhrania, ktoré pravdepodobne donot majú poňatia, čo je HTML alebo CSS. Všetky tie roky som si myslel, že by som požiadať o moc, keby som len očakávať, že dizajnér, ktorý sa snaží Shove jeho "nemožné kódom designu krku dole, aby pochopil, len trochu, čo jeho design by byť prevedená do. To by pomohlo v poriadku?
Potom som narazil na tento príspevok Dnes ... webové dizajnérmi, ktorí nemôžu kód ... Vďaka Pane! Som len jedným z mnohých, ktorí sa cítia rovnako ... nad artitle je trochu dlhá rozvláčny .. ale stojí za čítanie, každý slovo.
Vďaka Elliot Jay Zásoby ... Cítim úľavu!
Tu je niekoľko výňatkov z Elliots článku .
Úprimne povedané, som šokovaný, že v roku 2010 som ešte narazil 'WWW dizajnérov, ktorí sa nemôžu kódu svoje vlastné návrhy. Žiadne ospravedlnenie.
... Ja som mala byť trochu konkrétnejší v mojom tweetu. Hovoril som o projektantov, ktorí nemajú ani tú najzákladnejšiu HTML a CSS schopnosti premeniť plochý dizajn do skutočného miesta. Nie ľudia, ktorí sa zámerne rozhodnú, že nebudú kódu, tí, ktorí nemôžu. A ja som tiež na mysli len front-end kód tu, samozrejme je to smiešne myslieť si, že dizajnéri by mal byť tiež úžasné back-end programátori ...
Dostávame 'WWW' designy zaslané v Illustratoru, 300 dpi, nemožné do kódu, bez konzistencie / použiteľnosť.
~ Amy Mahon
Je neskoro a ja musím zabaliť toto nejako. Viem, že tam bude veľa tých, ktorí so mnou nesúhlasia, a mojím zámerom nie je uraziť alebo rozrušenie niekoho, kto nemôžu kód, ale dúfam, že časť toho, čo som povedal, odráža niektoré z bodov, ktoré vždy prídu, keď ponorí do táto debata.
Na konci dňa, nemám strácať spánok nad tým, kto môže kód a kto nie. Som jednoducho naozaj prekvapený toľko dizajnérov, ktoré nemajú front-end zručností, ako som si myslel to minulosťou.
Prečítajte si tiež komentáre, bolo ich tam okolo 320 komentárov, ako som napísať ... že stojí za to čítať.
Prečítajte si prosím Elliots plné post tu .. Web návrhári, ktorí nemôžu zakódovanie
Vzhľadom k tomu, prepínač a text sú in-line, takže text zarovnať seba na spodnej strane prepínač, bude sa text javí ako mierne pod prepínačmi.
Ak si chcete tieto zladiť na vrchol, budete musieť umiestniť rádio a text do samostatných nádob, ako tagov alebo presahuje (podľa potreby) a oni sa postarajú o vyrovnanie. Bolo by jednoduchšie použiť bunky tabuľky aj vášho návrhu stručný dovolí.
To nebude vyzerať rovnako v každom prehliadači, pretože každý prehliadač zobrazí rádia trochu inak, tak tam vždy bude veľkosť problémy bez ohľadu na to, čo robíte.
HTML5 je stále návrh. Ako píšem, práca na HTML 5, ktoré sa začali v roku 2004, ešte je utváralo na základe spoločného úsilia medzi W3C HTML WG a WHATWG . Slovo je to, že budúci gén HTML bude mať vylepšení a funkcií, ktoré by nová štruktúra a sémantika, ovládacie prvky formulára, API, multimédiá tagy atď.
V jednoduchej angličtine ... čo by to znamenalo pre nás vývojári užívateľského rozhrania ...
<body> <header> ... </ header> <nav> ... </ NAV> <article> <section> ... </ Sekcia> </ Článok> <aside> ... </ stranou> <footer> ... </ päty> </ Body>
Miesto
<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>
napr
<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 ďalších zmien a upgrady na novú verziu ... Bude mať aktualizovať tento post, ako som prišiel naproti cez nejaké tie zaujímavé užitočné .... Na tomto mieste
Tento dokument nemusí poskytovať presné informácie, ako HTML 5 špecifikáciu je stále aktívna vo vývoji. Ak si nie ste istí, vždy skontrolujte špecifikáciu HTML 5 tu .
Čas a znova, keď všetky ostatné prehliadače vidieť, ako sa správať povedal podľa pravidiel W3C, teda špirály vás z vývoja ducha tým, že hodí zlosť, že sa nezdá, že má opravu. Len taký človek je tento problém v IE7.
Problém vyhlásenie:
Ja, a tak mohla veľa z iných vážnych webových vývojárov si všimli viac než mnohé časy, že keď tam vložený plaváky v rozvrhnutí, na vznášať sa nad niektorými odkazy (kotviace tagy), obsahujúci kontajner zdá posunúť o pár pixelov vpravo . Snažil som sa google riešenie tohto problému, ale ťažko nájsť akúkoľvek rozumnú odpoveď, prečo a kedy k nej dôjde (to by mohlo pomôcť zabrániť tomuto problému deje), a preto som nikdy nenašiel jednoznačné riešenie problému buď ...
Možné riešenie:
Zo skúsenosti, mám upozornenia 90% percent z časov, tj, že tento problém je vyriešený tým, že pridá zoom majetok v definícii CSS na mis-chová kontajnera ...
# {Somediv zoom: 1; }
opäť dôvody sú nejasné ... skúste to ...
Niektoré prvky v IE majú "hasLayout" vlastnosť, ktorá je "pravda" v predvolenom nastavení. Mnoho vizuálne CSS správanie, napríklad alfa filter pracuje len na prvok, ktorý hasLayout. a {zoom: 1} Zdá sa, že dať zameriavajúce sa na prvky na hasLayout vlastnosť .... Užitočné? I dont, že áno ...
Zoom vlastnosť je tiež vyzerá, že podporuje Chrome, ale jeho použitie dint Zdá sa, že veľký negatívny vplyv na moje dispozície ... skúste to, keď to funguje u vás ... ak sa tak nestane, záložku tejto stránky v kocky "CSS"
Včera, po vydaní som sa stretla s CSS reset vo prehliadača Google Chrome ... Myslel som kopať trochu hlbšie do oblasti užívateľských listov Agent štýl ...
Našiel túto tabuľku na predvolené hodnoty CSS2.1 užívateľa listy Agent štýl ... (pre tých, ktorí nevedia o čo "User Agent Style Sheets, je nasledovať Čo je Užívateľ listy Agent Style (špecifikácie) .
Pre úplný zoznam CSS 2.1 User Agent predvolené štýlov kliknite tu
