Havde læst dette i nogle blog ... syntes det var rart at katalogisere dette i fremtiden ref .... også kunne være et vigtigt interview spørgsmål, som du vil spurgt nogle dage ....
Skriv et uddrag af CSS, der vil vise et stykke med blåt i ældre browsere, rød i nyere browsere, grøn i IE6 og sort i IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Havde dette mærkelige spørgsmål, hvor et stykke af Javascript virkede fint i alle browser ans som sædvanlig bar IE 
... Simple det var, men da scriptet ikke var skrevet af mig, det tog lidt tid at fejlsøge dette "Objektet understøtter ikke denne egenskab eller metode" fejl, der kun IE var at kaste op. Sandsynligvis! Hvis jeg skulle skrive manuskriptet, ville jeg ikke have fået denne fejl overhovedet, som ikke blande mine variabelnavne med felt Ids :).
Problem: Objektet understøtter ikke denne egenskab eller metode (på linje 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Opløsning:
Fejlen er genereret på thirdrow i eksemplet ovenfor (Linje 3 ... "shortdesc = document.getE ...."). Jeg prøvede alle slags dumme ting, som I dont er endda værd nævne her, og til sidst gætte hvad! bare ændre shortdesc var til noget andet sluppet af fejlen. Dybest set! Variabelnavnet skulle forskellig fra fieldID
Re-Cycling er Buzzword og i Webudvikling betyder det ikke anderledes. Det sparer energi, i form af indsats!
Over år med at skrive CSS og skabe HTML fra design, har jeg fulgt nogle af bedste praksis, i jagten på at spare tid og energi i det, vi normalt betegnelsen som "Re-opfinde den dybe tallerken". Igen og igen har jeg fortalte mig selv, at jeg skal skabe nogle skabeloner, nogle standard genbruges CSS, som jeg ville bruge UD AF BOKSEN i mit fremtidige arbejde. Selvom det ikke helt, men jeg lykkedes at opnå nogle mål.
I fremme, Re-brug af CSS havde jeg et kig på de få CSS rammer, der er almindeligt tilgængelige for os, og besluttede at sætte dem til at bruge, da disse er afprøvet og testet og skabt af meget erfarne udviklere, end mig selv. Endnu vigtigere "UNDGÅ genopfinder".
Selvom almindelig viden til veteraner, har jeg forsøgt at pen nogle af de vigtigste begreber / bedste-praksis / tanker, der er lagt i at skabe disse rammer, at RE-CYKLING af CSS muligt. Håber dette vil hjælpe nogle CSS udviklere, der er lige ved at, og for nylig gik ombord på CSS vognen!
Brug Navngivningskonventioner
Dette må være den vigtigste faktor i at gøre CSS / HTML genbruges. Give konsistente navne til sideelementer muliggør genbrug af siden komponenter og deres stil med lidt eller modifikationer. I tråd med dette argument, HTML5 selv, i en væsentlig ændring ændring i forhold til sine forgængere, er at indføre nogle strukturelle tags dvs. <article>, <section>, <header>, <aside>, og <nav> [ Hvad vil HTML5 medbringe? ]. Selv med HTML 4 (eller lavere), er det bedst at nævne standard dele af din side consistanly som i den simple eksempel nedenfor ...
Husk, de fleste sider på dit projekt, ender med at have de samme centrale strukturelle elementer. Identificere disse fælles grundlæggende sideelementer ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Nulstil standardstiler (CSS nulstiller): Uanset om du bruger en ramme eller skriv din egen, skal du give CSS Nulstiller [ Hvad er CSS Nulstiller? ], da de reducerer eller sommetider fjerne visuelle uoverensstemmelser, der opstår mellem forskellige browsere. I simple ord CSS Reset Mechanism sætter stilarter HTML Element til nul eller null værdier, og dermed tilsidesætter enhver browser standardværdier kan de udgør. Dette giver en ren tavle at indstille egenskaberne af disse elementer uden for enhver User-Agent Defaults [ CSS2.1 User agent typografiark Defaults ]. Alle de CSS rammer har af reset-mekanisme. Hvis du skriver dit eget CSS Nulstiller, et advarende ord er, at hvis du tilfældigvis til at glemme at nulstille en vigtig egenskab, kan det føre til cross-browser problemer, som er meget svære at fejlrette. Husk, Behold en kopi af reset stilarter og slippe dem i hvert nyt projekt, du opretter.
krop, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, H5, H6, før, form, fieldset, input, skal du vælge, textarea, p, blockquote, tabel, th, td { kant: 0px; margin: 0; padding: 0; }
Angive standarder (Baseline Styles) til Elements:
Når du har angivet (til nul eller nul) standardværdier for visse egenskaber af visse HTML-elementer, er det nødvendigt at anvende nogle stilarter på tværs af alle forekomster af disse elementer. Disse standardindstilling kan variere som pr design eller efter den bedste praksis, du følger.
De fleste CSS rammer, altid introducerer nogle nye standarder, ud over at nulstille standardbrowser stilarter.
Disse standarder er ugyldig af User-Agent Defaults (skrællet væk af CSS Reset), vil disse være konsistent på tværs af browsere.
Husk, at baseline-stilarter bruges til at indstille stilarter, som vil blive anvendt design-bred. f.eks.
html {font-size: 77%; font-family: Arial, sans-serif;} stærk, h1, h2, h3, h4, h5, h6 {font-weight: fed;}
Abstrakte Styles for almindelige HTML-Komponenter og almindelige klasser:
De fleste projekt bestående af flere sider vil have fælles HTML-elementer bruges på tværs af webstedet, for fx nogle slags former, advarsler og fejl, Custom popups, lightboxer osv. Da sådanne komponenter anvendes igen på tværs af projekter, vil det være nyttigt at give et sæt af klasser i forbindelse med foruddefinerede typografier for disse komponenter, og du kan spare dig selv en masse tid.
Bortset fra at definere genanvendelige stilarter definitioner for de fælles HTML komponenter, kunne vi abstrakte stilarter klasser vedrørende typografi, farve eller endda layout. Jeg har en tendens du bruger ... almindelige klasser som Clearfix, Font08, FontGrey, AlignL, DisplayB osv.
form, input {border: 0px; baggrund: # ffffff; padding: 0px 10px; _padding: 0px 0px; Højde: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;} form, textarea {border: 0px; baggrund: # ffffff; color: # 000000; font-size: .9 em; line-height: 1.5em; overløb: synligt;} . Fbold {font-weight: fed, farve: # CCCCCC;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {klart: begge;} . Divider {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A, højde: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: højre}. Alignc {text-align: center} . Floatr {float: højre;}. Floatl {float: left;}
Rettelser til almindelige browser særheder
Forskellige browsere implementere CSS kode og med varierende grad af støtte til CSS specifikationerne. Resultatet af denne .... "Browser Quirks", at vi udviklere er tilbage til at tackle. Især IE6 hjemsøger de fleste CSS kodere med en frist til at opfylde. Den gode nyhed er erfaring har samlet mulige Genanvendelige rettelser til disse spørgsmål (ofte betegnes som CSS Hacks ).
Husk, Hold disse hacks / fixes handy
/ * Følgende zoom: 1 regel er specifikt for IE6 + IE7. * / * Html. Clearfix, *:. Første barn + html clearfix { zoom: 1; }
Hold Forbedring af din CSS
Endelig. Hvis du bliver inspireret og har til hensigt at anvende en eller flere af de CSS rammer, Heres er hurtig liste over nogle populære dem ....
Husk, ved hjælp af CSS rammer betyder ikke, at du er doven til at skabe en af dine egne ... Det betyder, at du er smart at lære af andres erfaringer og fejltagelser, spare tid og øge produktiviteten!!
CSS afsluttet 10 års eksistens i år! De, der har eksisteret i et stykke tid, tjener deres brød (eller ej) bruger CSS, så er du måske klar over, hvordan vi har sulten for et godt udvalg af skrifttyper. Selv med manglende skrifttyper designere som dem på CSS Zen Garden har gjort brug af CSS baggrundsbilleder til at erstatte skrifttyper i jagten på at gøre nogen ret til deres designs. Vi har også prøvet Flash / JavaScript ® hacks til at nå vores design mål. På ingen måde det er en forkert måde at få de skrifttyper, vi ønsker i vores web-design, men bestemt, det er ikke den mest ønskelige måde. og over årene webdesigner, ligesom mig, er helt pålidelig på ti eller deromkring skrifttyper til deres design.
Den seneste udvikling inden for web-standarder og skrifttypeformater gør det muligt at gøre HTML-tekst i skrifttyper andre end de samme gamle standardskrifttyper. Leveres i "@ fontface" CSS decleration.
@ Fontface provids en løsning til at linke til den faktiske skrifttype fil og hente den fra internettet. Brug @ fontface, kan designere bruge skrifttyper uden at skulle fryse teksten som baggrundsbilleder. Gennemførelsen er meget ligetil, som vist nedenfor, men som alle gode ting har en CON del heraf, ikke alle browsere understøtter en enkelt "skrifttype". Hvis du planlægger at bruge @ fontface i stedet med krav om cross browser-understøttelse, så bliver du nødt til at give kilder til forskellige font-typer af samme.
Brug @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular '; src: url ('CalligraphyFLF.eot'); src: lokalt ('CalligraphyFLF'), lokal ('CalligraphyFLF'), url ('CalligraphyFLF.woff') format ('WOFF'), url ('CalligraphyFLF.ttf') format ('TrueType'), url ('CalligraphyFLF . svg # CalligraphyFLF ') format ("SVG'); } @ Font-face { font-family: "Din skrifttype"; src: url ("fonts / font_filename.eot"); src: lokalt ("Alternativ navn"), lokal ("Alternatename"), url ("fonts / font_filename.woff") format ("WOFF"), url ("fonts / font_filename.otf") format ("OpenType"), url ("skrifttyper / font_filename.svg # font_filename") format ("SVG"); } H2 {font-family: "Din skrifttype", Georgien, Serif;}
Som du kan se af ovenstående eksempel, til også at omfatte den valgte skrifttype, må man linke til et sæt af fonttypes for den samme skrifttype. Derfor folk henvise til det som "Font Kit".
Der er Font Kits til rådighed, der tillader udtrykkeligt forbinder med CSS @ font-face ejendom, den i henhold til End User License Agreement (EULA).
Nyttige WebFont Ressourcer:
Med min begrænsede færdigheder-sæt med værktøjer som Photoshop og Illustrator, kan jeg ærligt indrømme, at jeg er bedre udvikler end jeg er en designer. Men min baggrund med kerne (server side) udvikling med Java / PHP / COBOL, har været en meget positiv indflydelse på mine UI udviklingskompetencer. Hvad jeg mener er, og samtidig skabe mine designs, dvs når jeg laver design, tænker jeg, hvordan design kan bedst omdannes til HTML-CSS og samtidig gøre HTML-CSS, giver jeg en tanke om backend teknologi og gøre rimeligt sikker at HTML let kan implementeres i XSL loops eller PHP snippets osv.
Over årene har jeg været kastet hovedet på design af UI designere, som formentlig donot har en anelse om, hvad HTML eller CSS er. Alle disse år har jeg tænkt at jeg ville bede om for meget, hvis jeg bare forventer, at designeren, der forsøger at shov hans "umuligt at kode" design ned i min hals, for at forstå bare en lille smule, hvad hans design ville blive konverteret til. Det ville hjælpe ret?
Så faldt jeg over dette indlæg i dag ... webdesignere, der ikke kan kode ... Tak Herre! Jeg er bare en af mange, der føler det samme ... Ovenstående artitle er en smule lang forpustet .. men værd at læse, hvert eneste ord af det.
Thanks Elliot Jay Aktier ... jeg føler mig lettet!
Her er nogle uddrag fra Elliots artiklen .
Helt ærligt, jeg chokeret over, at i 2010 jeg stadig kommer på Tværs 'web-designere', der ikke kan kode deres egne designs. Ingen undskyldning.
... Jeg skulle have været lidt mere specifik i mit tweet. Jeg talte om designere, der ikke har selv de mest grundlæggende HTML og CSS færdigheder til at slå et fladt design til en egentlig hjemmeside. Ikke folk, der bevidst vælger ikke at koden; dem, der ikke kan. Og jeg også kun at henvise til front-end kode her, selvfølgelig er det latterligt at tro, at designere bør også være fantastiske back-end-programmører ...
Vi får 'web' design sendt i Illustrator, 300dpi, umulige at kode, ingen konsistens / usability.
~ Amy Mahon
Det bliver sent, og jeg har fået at pakke dette op en eller anden måde. Jeg ved, at der vil være mange der er uenige med mig, og min hensigt er ikke at fornærme eller forstyrre nogen, der ikke kan kode, men jeg håber, at noget af det jeg har sagt afspejler nogle af de punkter, der altid kommer op, når dykke ned i denne debat.
I slutningen af dagen, kan jeg ikke miste noget søvn over, hvem der kan kode, og der ikke kan. Jeg er bare virkelig overrasket over at finde så mange designere, der mangler frontend-færdigheder, som jeg troede det var en saga blot.
Læs også kommentarerne, der var omkring 320 kommentarer, som jeg skriver ... de er værd at læse.
Læs Elliots hele indlægget her .. webdesignere, der ikke kan kode
Da radio-knappen og teksten er inline, så teksten vil bringe sig i bunden af radio knappen, vil teksten synes at være lidt under radioknappen.
Hvis du ønsker disse for at tilpasse til toppen, er du nødt til at placere radioen og teksten i separate beholdere som divs eller spænder over (efter behov), og de vil tage sig af justeringen. Det ville være nemmere at bruge tabelceller også af dit design kort tillader det.
Dette vil ikke se det samme i alle browsere, som alle browsere viser radioer lidt anderledes, så der altid kommer til at blive størrelse spørgsmål uanset hvad du gør.
HTML5 er stadig et udkast. Som jeg skriver, Arbejdet med HTML 5, som blev påbegyndt i 2004, er stadig får form af en fælles indsats mellem W3C HTML WG og WHATWG . Ordet er, at den næste generation HTML vil have forbedringer og funktioner, hvilket ville nye struktur og semantik, formular-kontroller, API'er, multimedia tags mv.
I simple engelsk ... Hvad ville det betyde for os UI udviklere ...
<body> <header> ... </ header> <nav> ... </ nav> <article> <section> ... </ Afsnit> </ Artiklen> <aside> ... </ side> <footer> ... </ footer> </ Body>
I stedet for
<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>
fx
<video poster="poster.jpg"> <Kilde src = "video.3gp" type = "video/3gpp" medier = "håndholdt"> <source src="video.mp4" type="video/mp4"> </ Video> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </ Audio>
Der er mange flere ændringer / opgraderinger til nyere version ... Vil holde opdatere denne post som jeg kommer accross eventuelle interessante nyttige dem .... Se dette rum
Dette dokument må ikke give præcise oplysninger som HTML 5 specifikation er stadig aktivt i udvikling. Når du er i tvivl, skal du altid tjekke HTML 5 specifikationen her .
Igen og igen, når alle de andre browsere set at opføre sig som fortalt af W3C regler, dvs spiraler dig ud af udviklingen ånd ved at kaste et raserianfald, betyder det ikke synes at have et fix. Bare sådan en, er dette problem i IE7.
Problem Statement:
Jeg og så kan mange af de andre alvorlige web-udviklere har bemærket mere end mange gange, at når der er indlejret flyder i layout, om svæver over nogle links (anker tags), den indeholder beholderen ser ud til at flytte nogle få pixels til højre . Jeg har forsøgt at google løsninger til dette problem, men har næppe fundet noget fornuftigt svar på hvorfor og hvornår det sker (som kan bidrage til at forhindre dette problem i at ske), derfor har jeg aldrig fundet en klar løsning på problemet enten ...
Mulig løsning:
Ud af erfaring, har jeg varsel 90% procent af de gange, dvs, at dette problem løses ved at tilføje en zoom ejendom i CSS definition af mis-opfører beholder ...
# Somediv { zoom: 1; }
igen årsagerne er tvetydige ... prøv dette ...
Nogle elementer i IE har en "hasLayout" ejendom, der er "ægte" som standard. Mange visuelle CSS adfærd, for eksempel en a-filter virker kun på et element, der hasLayout. og {Zoom: 1} synes at give de udvalgte elementer hasLayout ejendom .... Nyttigt? Jeg tror ikke så ...
Zoom Ejendommen er tilsyneladende også understøttes af Chrome, men dens anvendelse fordybning synes at gøre meget negativ effekt på mit layout ... prøv det, hvis det virker for dig ... hvis det ikke gør, bogmærke denne side under "CSS craps"
I går, efter emne, jeg mødte med CSS Nulstiller i Google Chrome ... Jeg tænkte på at grave lidt dybere ind i det område af User Agent Style Sheets ...
Fundet denne tabel på standardværdier for CSS2.1 User agent Style Sheets ... (for dem, uvidende om, hvad "User agent Style Sheets", er at følge Hvad er User agent Style Sheets (specifikation) .
For en komplet liste over CSS 2.1 User agent Style Sheets standarder klik her
