Hade läst detta på något blogg ... tyckte det var skönt att katalogisera detta för framtiden ref .... skulle också kunna vara en viktig intervju fråga som du skulle bett en dag ....
Skriva en snutt av CSS som kommer att visa ett stycke i blått i äldre webbläsare, rött i nyare webbläsare, gröna IE6 och svart i IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Hade denna märkliga fråga, där en del av Javascript fungerade bra i alla webbläsare ans som vanligt bar IE 
... Enkelt det var, men eftersom skriptet inte skrevs av mig, det tog ett tag att felsöka detta "Objektet stöder inte den här egenskapen eller metoden" error som bara IE kastade upp. Förmodligen! Om jag skulle skriva manus, skulle jag inte ha fått detta fel alls, liksom inte blanda mina variabelnamn med fältet Ids :).
Problem: Objektet stöder inte egenskapen eller metoden (på linje 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Lösning:
Felet alstras på thirdrow i exemplet ovan (linje 3 ... "shortdesc = document.getE ...."). Jag försökte alla slags dumma saker, att jag inte ens är värt att nämna här och äntligen gissa vad! bara ändra shortdesc var till något annat blivit av felet. I grund och botten! Variabelnamnet fick skiljer sig från den fieldID
Re-Cykling är Buzzword och i webb utveckling betyder det inte annorlunda. Det sparar energi, i form av ansträngning!
Under år av att skriva CSS och skapa HTML från design, jag har följt några bästa praxis, i strävan efter att spara tid och energi på det vi vanligtvis benämner som "Re-uppfinna hjulet". Gång på gång har jag sagt mig själv att jag måste skapa några mallar, några standard återanvändbar CSS som jag skulle använda UR rutan i mitt framtida arbete. Även om det inte helt, men jag lyckades att uppnå vissa av målen.
För att främja, återanvändning av CSS, hade jag en titt på de få CSS ramar som finns allmänt tillgänglig för oss och beslutade att sätta dem att använda, eftersom dessa är beprövade och skapad av mycket erfarna utvecklare, än jag själv. Ännu viktigare "AVOID att uppfinna".
Även bekant för veteraner, har jag försökt att pennan vissa centrala begrepp / bästa praxis / tankar som har gått in i att skapa dessa ramar, för att göra återvinning av CSS möjligt. Hoppas att detta kommer hjälpa vissa CSS utvecklare som är på väg att och nyligen gick ombord på CSS bandwagon!
Använd Namnkonventioner
Detta måste vara den viktigaste faktorn vid framställning av CSS / HTML återanvändbar. Att ge konsekventa namn sidelement gör återanvändning av sidan komponenter och deras stilar med liten eller modifieringar. I linje med detta argument även HTML5, i en stor förändring förändring över sina föregångare, är att införa vissa strukturstöd taggar dvs. <article>, <sektion>, <header>, <aside> och <nav> [ Vad kommer HTML5 ta? ]. Även med HTML 4 (eller lägre), är det bäst att nämna vanliga delar av din sida consistanly som i det enkla exemplet nedan ...
Kom ihåg att de flesta sidor på ditt projekt, sluta med samma centrala strukturella element. Identifiera de gemensamma drag som grundläggande sida ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Återställ Standard Styles (CSS Återställer): Oavsett om du använder en ram eller skriv, måste du ange CSS Återställer [ Vad är CSS Återställer? ], eftersom de minskar eller ibland eliminera visuella inkonsekvenser som uppstår mellan olika webbläsare. I enkla ord CSS Reset mekanismen sätter stilar av HTML-element för att noll eller null-värden och därmed åsidosätter de värden som standardwebbläsare de kan poser. Detta ger en ren skiffer för att ställa in egenskaper för dessa element tomrum som användaren Agent Defaults [ CSS2.1 Användarstatistik Agent Style Sheet standard ]. Alla CSS ramar har av återställning mekanism. Om du skriver din egen CSS Återställer är ett varningens ord att om du råkar glömma att återställa en nyckel fastighet, kan det leda till cross-browser frågor som är mycket svåra att felsöka. Kom ihåg att hålla en kopia av reset stilar och släppa dem i varje nytt projekt som du skapar.
kropp, div, dl, dt, dd, ul, ol, li, H1, H2, H3, H4, H5, H6, pre, form, fieldset, input, Select, textarea, p, blockquote, tabell: e, td { border: 0px; margin: 0; padding: 0; }
Ange standardinställningar (Baseline Stilar) till Elements:
När du har ställt in (till noll eller null) standardvärden för vissa attribut av vissa HTML-element, är det nödvändigt att tillämpa vissa stilar inom alla fall av dessa element. Dessa Standardinställningen kan variera per utformning eller enligt bästa praxis du följer.
De flesta CSS ramar, alltid introducerar några nya standardvärden, förutom att återställa stilar standardwebbläsare.
Dessa standard är ogiltiga av User-Agent Defaults (skalas bort av CSS Reset), kommer dessa att vara konsekvent över webbläsare.
Kom ihåg att utgångsläget stilar används för att ställa stilar som kommer att användas design-världen. t. ex.
html {font-size: 77%, font-family: Arial, sans-serif;} stark, h1, h2, h3, h4, h5, H6 {font-weight: bold;}
Abstrakta Stilar för vanliga HTML Komponenter och gemensamma klasser:
De flesta projekt som består av flera sidor kommer att ha gemensamma HTML-element som används på hela webbplatsen, för t.ex. vissa slags former, varningar och fel, personliga popups och ljusbord etc. Eftersom dessa komponenter används igen mellan projekt, kommer det vara lämpligt att ge en uppsättning klasser som är förknippade med fördefinierade stilar för dessa komponenter och du kan spara dig mycket tid.
Bortsett från att definiera återanvändbara Stildefinitioner för de gemensamma HTML-komponenter, kan vi abstrakta stilar klasser som gäller typografi, färg eller ens layout. Jag själv brukar du använda ... vanliga klasser som Clearfix, Font08, FontGrey, alignl, DisplayB etc.
formulärdata {border: 0px; Bakgrund: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; höjd: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;} formen TextArea {border: 0px; Bakgrund: # FFFFFF; color: # 000000; font-size: .9 EM, line-height: 1.5em; spill: synlig;} . Fbold {font-weight: bold; color: # CCCCCC;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {tydligt: båda;} . Divider {border-top: 1px solid # 647B06, border-bottom: 1px solid # 9CC00A, höjd: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: höger}. Alignc {text-align: center} . Floatr {float: höger;}. Floatl {float: left;}
Fixar till vanliga webbläsare quirks
Olika webbläsare genomföra CSS-kod och ge varierande grad av stöd för CSS specifikationer. Resultatet av denna .... "Webbläsare Quirks", som vi utvecklare kvar att ta itu med. Speciellt spökar IE6 mest CSS kodare med en tid att passa. Den goda nyheten är erfarenheten har samlat möjliga återanvändbara korrigeringar i dessa frågor (ofta kallas CSS Hacks ).
Kom ihåg att hålla dessa hacka / korrigeringar hands
/ * Följande zoom: 1 regel är specifikt för IE6 + IE7. * / * HTML. Clearfix, *. Första-barn + html clearfix { zoom: 1; }
Håll förfina din CSS
Äntligen. Om du är inspirerade och tänker använda ett eller flera av CSS ramar är Heres snabb lista på några populära ....
Kom ihåg att använda CSS ramar innebär inte att du är lat för att skapa en egen ... Det innebär att du är smart att lära av andra erfarenheter och misstag, spara tid och öka produktiviteten!!
CSS i 10 år existens i år! De som har funnits ett tag, tjäna sitt bröd (eller inte) med hjälp av CSS, så du kanske vet hur vi har svälta för att ett bra utbud av teckensnitt. Även med avsaknaden av typsnitt designers som de på CSS Zen Garden har använt sig av CSS bakgrundsbilder att ersätta teckensnitt i jakten på att göra lite rättvisa sina konstruktioner. Vi har också försökt Flash / JavaScript ® hacka för att nå våra mål. På intet sätt är detta ett fel sätt att få typsnitt vi önskar i våra web design, men definitivt är det inte det mest önskvärda sättet. och under åren webbdesigner, liksom jag, har fullt förlitat sig på ett tiotal teckensnitt för sina konstruktioner.
Den senaste utvecklingen inom webbstandarder och format typsnitt gör det möjligt att göra HTML-text i typsnitt än samma gamla standard teckensnitt. Kommer i "@ fontface" CSS decleration.
@ Fontface provids en lösning för att länka till den aktuella teckensnittet filen och hämta det från webben. Med @ fontface kan designers använder typsnitt utan att behöva frysa texten som bakgrundsbilder. Genomförandet är mycket rakt fram, som visas nedan men som alla goda ting har en CON del av avtalet, inte alla webbläsare stödjer en enda "typsnitt". Om du planerar att använda @ fontface i sida med som kräver kors webbläsare support, då du måste ge källor till olika teckensnitt-typer av densamma.
Användning @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular '; src: url ('CalligraphyFLF.eot'); src: Lokal (CalligraphyFLF '), lokal (CalligraphyFLF), url ("CalligraphyFLF.woff) format (" WOFF), url ("CalligraphyFLF.ttf) format (" TrueType), url ("CalligraphyFLF . SVG # CalligraphyFLF) format ("SVG '); } @ Font-face { font-family: "Din typsnitt"; src: url ("typsnitt / font_filename.eot"); src: lokal ("Alternate namn"), lokal ("Alternatename"), url ("typsnitt / font_filename.woff") format ("WOFF"), url ("typsnitt / font_filename.otf") format ("OpenType"), url ("typsnitt / font_filename.svg # font_filename") format ("SVG"); } H2 {font-family: "Din typsnitt", Georgia, serif;}
Som du kan se från exemplet ovan, att inkludera den valda teckensnittet, måste man länka till en uppsättning fonttypes för samma typsnitt. Därför människor hänvisar till det som "Font Kit".
Det finns Font kit som uttryckligen tillåter samman med CSS @ font-face egenskapen den under End User License Agreement (EULA).
Användbara WebFont resurser:
Med min begränsade kompetens-set med verktyg som Photoshop och Illustrator kan jag erkänna ärligt att jag är bättre utvecklare än jag en designer. Men min bakgrund med kärna (server side) utveckling med Java / PHP / COBOL, har varit en mycket positiv inverkan på min UI utvecklingskompetens. Vad jag menar är, när du skapar mina mönster, det vill säga när jag gör design, jag tänker på hur design kan bäst omvandlas till HTML-CSS och samtidigt gör HTML-CSS, ger jag en tanke om backend-tekniken och se någorlunda säker att HTML kan enkelt implementeras i XSL slingor eller PHP snippets etc.
Under åren har jag kastats huvudet på design av användargränssnitt designers som förmodligen donot har en aning om vad HTML eller CSS är. Alla dessa år har jag tänkt att jag skulle begära för mycket, om jag bara räknar designer, som försöker shov hans "omöjliga kod" designen halsen, för att förstå bara lite vad hans design skulle omvandlas till. Det skulle hjälpa rätt?
Sen kom jag över detta inlägg idag ... webbdesigners som inte kan koden ... Tack Herre! Jag är bara en av många som känner likadant ... Ovanstående artitle är lite lång omständligt .. men värt läs, varje ord av det.
Tack Elliot Jay Stocks ... Jag känner lättnad!
Här är några utdrag ur Elliots artikeln .
Ärligt talat, jag chockad över att år 2010 jag fortfarande komma över webb-designers som inte kan koda sina egna konstruktioner. Ingen ursäkt.
... Jag borde ha varit lite mer specifik i min tweet. Jag talade om designers som inte har ens den mest grundläggande HTML och CSS kunskaper för att förvandla en platt design till en verklig plats. Inte människor som uppsåtligen väljer att inte koden, de som inte kan. Och jag också hänvisar bara till front-end-kod här, det är naturligtvis löjligt att tro att designers bör också vara fantastiska back-end programmerare ...
Vi får "webb" design som sänds i Illustrator, 300dpi, omöjliga att koda, ingen konsistens / användbarhet.
~ Amy Mahon
Det börjar bli sent, och jag måste avsluta upp detta på något sätt. Jag vet att det kommer att finnas många som inte håller med mig, och min avsikt är inte att såra eller upprörd någon som inte kan koden, men jag hoppas att en del av vad jag har sagt reflekterar en del av de punkter som alltid kommer upp när djupdykning i denna debatt.
Vid slutet av dagen, inte förlorar jag inte någon sömn över vem som kan koda och som inte kan. Jag är bara verkligen förvånad över att hitta så många designers som saknar front-end färdigheter, som jag trodde det var ett minne blott.
Läs också kommentarerna fanns omkring 320 kommentarer, när jag skriver ... de är värda att läsa.
Läs Elliots hela inlägget här .. webbdesigner som inte kan koda
Eftersom radioknappen och texten är inline, så att texten kommer att anpassa sig till botten av radion knappen, kommer texten verkar vara något under alternativknappen.
Om du vill få dessa att anpassa sig till toppen, du måste placera radion och texten i separata behållare som Divar eller sträcker sig över (i förekommande fall) och de tar hand om inriktningen. Det skulle vara lättare att använda tabellceller också, din design kort tillåter det.
Detta kommer inte ser likadana ut i alla webbläsare, eftersom varje webbläsare visar radioapparater något annorlunda, så det finns alltid kommer att vara storlek frågor oavsett vad du gör.
HTML5 är fortfarande ett utkast. När jag skriver, Arbete på HTML 5, som inleddes år 2004, fortfarande ges form av en gemensam ansträngning mellan W3C HTML WG och WHATWG . Ordet är att nästa generations HTML kommer att ha förbättringar och funktioner, vilket skulle ny struktur och semantik, formulärkontroller, API, multimedia taggar osv.
På enkel engelska ... Vad skulle det betyda för oss UI utvecklare ...
<body> <header> ... </ rubrik> <nav> ... </ nav> <article> <sektion> ... </ Sektion> </ Artikel> <aside> ... </ åt sidan> <footer> ... </ sidfot> </ Body>
Istället för
<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>
t.ex.
<video poster="poster.jpg"> <Source src = "video.3gp" type = "video/3gpp" media = "handhållen"> <source src="video.mp4" type="video/mp4"> </ Video> <Audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </ Ljud>
Det finns många fler ändringar / uppgraderingar till nyare version ... Kommer att hålla uppdatera denna post som jag kommer tvärs några intressanta användbara sådana .... Titta på detta utrymme
Detta dokument får inte ge korrekt information som HTML 5 specifikationen är fortfarande aktivt i utvecklingen. Om du är osäker, kontrollera alltid HTML 5 specifikationen här .
Tid och om igen, när alla andra webbläsare ses att bete sig som sagt av W3C reglerna IE spiraler dig av utvecklingen anden genom att kasta en ilska, verkar det inte ha en fix. Just en sådan man är denna fråga i IE7.
Problem Uttalande:
Jag och så kanske många av de andra allvarliga webbutvecklare har sett mer än många gånger, att när det kapslade flyter i utförandet, om hover över några länkar (ankare taggar), verkar som innehåller behållaren för att flytta några pixlar åt höger . Jag har försökt att google lösningar för denna fråga, men har knappast hittat någon rimligt svar på varför och när den inträffar (som kan hjälpa till att förhindra det här problemet från att hända), så jag har aldrig hittat en klar lösning på problemet heller ...
Möjlig lösning:
Av erfarenhet har jag märker 90% procent av tiden, dvs att denna fråga är fixerad genom att lägga till en zoom fastighet i CSS definitionen av MIS-beter container ...
# Somediv { zoom: 1; }
återigen orsakerna är tvetydiga ... prova det här ...
Vissa element i IE har en "hasLayout" egendom, som är "sant" som standard. Många visuella CSS beteenden, till exempel arbetar en alfa-filter endast en faktor som hasLayout. och {Zoom: 1} verkar ge mål element som hasLayout fastigheten .... Användbart? Jag tror inte så ...
Zoom Fastigheten är verkar också stöds av Chrome, men dess användning uppkomsten verkar göra mycket negativ effekt på min layout ... prova det, om det fungerar för dig ... om det inte gör det bokmärke denna sida under "CSS craps"
Igår, efter fråga jag stött på med CSS Återställer i Google Chrome ... Jag tänkte gräva lite djupare in i området Style användare Agent Sheets ...
Hittade denna tabell på standardvärden för CSS2.1 Style Användarstatistik Agent Sheets ... (för de ovetande om vad "Style Användare Agent Sheets" är att följa vad är User Agent Style Sheets (specifikation) .
För en fullständig lista över CSS 2.1 Style Användarstatistik Agent Ark standard klicka här
