Hadde lest dette i noen bloggen ... syntes det var hyggelig å katalogisere dette for fremtiden ref .... også kunne være et viktig intervju spørsmål som du ville spurt en dag ....
Skriv en kodebit CSS som vil vise et avsnitt i blått i eldre nettlesere, rød i nyere nettlesere, grønn i IE6 og svart i IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Hadde dette merkelige problemet, hvor et stykke Javascript fungerte fint i alle nettleserens ans som vanlig bar IE 
Enkelt ... det var, men siden manus ikke ble skrevet av meg, tok det en stund å feilsøke denne "Objektet støtter ikke denne egenskapen eller metoden" feil at bare IE ble kastet opp. Sannsynligvis! Hvis jeg skulle skrive manuset, ville jeg ikke ha fått denne feilen i det hele tatt, så ikke bland mine variabelnavn med felt Ids :).
Problem: Objektet støtter ikke denne egenskapen eller metoden (på linje 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Løsning:
Feilen er generert på thirdrow i eksempelet ovenfor (Linje 3 ... "shortdesc = document.getE ...."). Jeg prøvde alle slags dumme ting, at jeg ikke egentlig var verdt omtale her og endelig gjett hva! bare endre shortdesc Var til noe annet ble kvitt feilen. Utgangspunktet! Variabelnavnet måtte forskjellig fra fieldID
For noen timer nå har jeg vært å se på løsninger for å kjøre / teste mine statiske HTMLs i Eclipse / Android-emulatoren. Har ikke vært helt vellykket enda .... Hva jeg mener med "Totally" er HTML blir lastet OK, men all CSS og JS, dvs. det visuelle uttrykket ikke blir sett. I utviklere ord er CSS ikke brukt på siden ...
Tenkte det ville noen andre newbie Android UI utviklere, hvis jeg bemerket tekstutdraget ned som jeg pleide å vise HTML.
Og Android gurus, kan du legge inn kommentarer for å hjelpe oss nybegynnere i mobil UI utviklere videre!
Sorry! men Im forutsatt at du vet hvordan du oppretter en Android Mobile Application i Eclipse.
Lag dette som aktiviteten din, og dette vil lese filen "index.html" fra prosjektet eiendeler / mappe.
public class Test extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WebView webview = new WebView(this); setContentView(webview); try { InputStream fin = getAssets().open("index.html"); byte[] buffer = new byte[fin.available()]; fin.read(buffer); fin.close(); webview.loadData(new String(buffer), "text/html", "UTF-8"); } catch (IOException e) { e.printStackTrace(); } } } Re-Sykling er Buzzword og i webutvikling betyr det ikke annerledes. Det sparer energi, i form av innsats!
Over år med å skrive CSS og lage HTML fra design, har jeg fulgt noen beste praksis, i jakten på å spare tid og energi på det vi vanligvis begrepet som "Re-Inventing the Wheel". Gang på gang har jeg fortalt meg selv at jeg må lage noen maler, noen standard gjenbrukbare CSS som jeg ville bruke UT av boksen i mitt videre arbeid. Selv om ikke helt, men jeg klarte å oppnå noen av målene.
I fremme, Re-Bruk av CSS, hadde jeg en titt på de få CSS rammeverk som er lettest tilgjengelig for oss, og bestemte seg for å sette dem i bruk, da disse er prøvd og testet og skapt av mye erfarne utviklere, enn meg selv. Enda viktigere "unngå ny oppfunnet".
Selv om felles kunnskap til veteraner, har jeg forsøkt å pennen noen sentrale begreper / beste praksis / tanker som har gått inn i å skape disse rammene, for å gjøre RE-sykling av CSS mulig. Håper dette vil hjelpe noen CSS utviklere som er bare om til og nylig gikk om bord i CSS lasset!
Bruk navnekonvensjoner
Dette må være den viktigste faktoren i å gjøre CSS / HTML gjenbrukbare. Gi konsekvente navn til sideelementer muliggjør gjenbruk av siden komponenter og deres stiler med liten eller modifikasjoner. I tråd med dette argumentet, Even HTML5, i en stor endring endring over sine forgjengere, er å introdusere noen strukturelle tags viz. <article>, <section>, <header>, <aside>, og <nav> [ Hva vil HTML5 bringe? ]. Selv med HTML 4 (eller lavere), er det best å nevne standard deler av siden consistanly som i det enkle eksemplet nedenfor ...
Husk at de fleste sidene på prosjektet, ender opp med å ha de samme sentrale strukturelle elementer. Identifisere disse fellesfagene sideelementer ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Resett standard stiler (CSS Tilbakestillinger): Enten du bruker et rammeverk eller skriv din egen, må du oppgi CSS Tilbakestiller [ Hva er CSS Tilbakestiller? ], som de reduserer eller noen ganger eliminere visuelle uoverensstemmelser som oppstår mellom ulike nettlesere. I enkle ord CSS Reset Mechanism setter stiler av HTML-element til null eller null verdier, og dermed overstyre eventuelle nettleserens standardverdier de kan positurer. Dette gir et rent rulleblad for å angi egenskapene av disse elementene blottet for enhver Bruker-agent Standarder [ CSS2.1 User Agent stilark Defaults ]. Alle CSS rammene har av reset mekanisme. Hvis du skriver du egen CSS Tilbakestiller, er et ord av forsiktighet at hvis du tilfeldigvis har glemt å tilbakestille en tast eiendom, kan det føre til kryss-nettleser saker, som er svært vanskelig å feilsøke. Husk Behold en kopi av Tilbake stiler og slippe dem inn hver nye prosjekt du oppretter.
kropp, div, dl, dt, dd, ul, ol, li, H1, H2, H3, H4, H5, H6, pre, form, fieldset, inngang, velger, textarea, p, blockquote, bord, th, td { border: 0px; margin: 0; padding: 0; }
Angi Defaults (baseline Stil) til Elements:
Etter at du har satt (til null eller null) standardverdiene av visse attributter av visse HTML-elementer, er det nødvendig å bruke noen stiler tvers hver forekomst av disse elementene. Disse standardinnstillingen kan variere per utformingen eller etter beste praksis du følger.
De fleste CSS rammeverk, introduserer alltid noen nye standarder, i tillegg til å tilbakestille standard nettleser stiler.
Disse standardene er ugyldig av User-Agent Defaults (strippet bort av CSS Reset), vil disse være konsekvent på tvers av nettlesere.
Husk, Baseline stiler brukes til å sette stiler som skal brukes design-bred. f.eks.
html {font-size: 77%; font-family: Arial, sans-serif;} sterk, H1, H2, H3, H4, H5, H6 {font-weight: bold;}
Abstrakte Styles for vanlige HTML-komponenter og vanlige klasser:
De fleste prosjekt bestående av flere sider vil ha felles HTML-elementer brukes i hele området, for eksempel noen slags former, varsler og feil, Custom popups og lysbokser osv. Siden slike komponenter er brukt om igjen på tvers av prosjekter, vil det være nyttig å gi en sett av klasser forbundet med forhåndsdefinerte stiler for disse komponentene, og du kan spare deg mye tid.
Bortsett fra å definere gjenbrukbare stildefinisjoner for de vanlige HTML-komponenter, kan vi abstrakte stiler klasser knyttet til typografi, farge eller layout. Jeg selv pleier du bruker ... vanlige klasser som Clearfix, Font08, FontGrey, AlignL, DisplayB etc.
skjema inngang {border: 0px; bakgrunn: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; høyde: 26px; color: # 000000; linje-høyde: 30px; font-size: 1.1em;} skjema textarea {border: 0px; bakgrunn: # FFFFFF; color: # 000000; font-size: .9 em; linje-høyde: 1.5em; overflow: visible;} . Fbold {font-weight: bold; color: # CCCCCC;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {klar: begge;} . Divider {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A, høyde: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: right}. Alignc {text-align: center} . Floatr {float: right;}. Floatl {float: left;}
Fikser på vanlige nettleser quirks
Forskjellige nettlesere implementere CSS koden og gi varierende grad av støtte for CSS spesifikasjonene. Resultatet av dette .... "Browser quirks", som vi utviklere er igjen å takle. Spesielt hjemsøker IE6 mest CSS programmerere med en deadline. Den gode nyheten er erfaring har samlet mulige gjenbrukbare løsninger på disse problemene (ofte betegnet som CSS Hacks ).
Husk Hold disse hacks / feilrettinger hendig
/ * Følgende zoom: 1 regelen er spesielt for IE6 + IE7. * / * Html. Clearfix, *:. Første-barn + html clearfix { zoom: 1; }
Hold Avgrense CSS
Endelig. Hvis du blir inspirert og har tenkt å bruke en eller flere av CSS rammeverk, er Heres rask liste over noen populære ....
Husk å bruke CSS rammeverk betyr ikke at du er lat til å lage deg en egen ... Det innebærer at du er smart å lære av andre erfaringer og feil, spare tid og øke produktiviteten!!
CSS fullført 10 år eksistens i år! De som har vært rundt en stund, tjene sitt brød (eller ikke) med CSS, så kan du klar over hvor vi har vært underernært på et godt utvalg av skrifter. Selv med mangel på fonter designere som de på CSS Zen Garden har gjort bruk av CSS bakgrunnsbilder å erstatte skrifttyper i jakten på å gjøre noen rettferdighet til sine design. Vi har også forsøkt Flash / JavaScript ® hacks å nå våre design mål. På ingen måte dette er en feil måte å få de skriftene vi ønsker i våre web-design, men definitivt, er det ikke den mest ønskelige måten. og over år webdesigner, som meg, har fullt stolt på ti eller så skrifter for sin design.
Den siste utviklingen i webstandarder og skriftformater gjør det mulig å gjengi HTML-teksten i skriftsnitt andre enn de samme gamle standard fonter. Leveres i "@ fontface" CSS decleration.
@ Fontface provids en løsning å koble til selve skriften filen og hente den fra nettet. Bruke @ fontface, kan designere bruke fonter uten å fryse teksten som bakgrunnsbilder. Implementeringen er veldig rett frem, som vist nedenfor, men som alle gode ting har en CON del til det, ikke alle nettlesere støtter en enkelt "skrifttype". Hvis du planlegger å bruke @ fontface i området med krever kryss nettleser støtte, så må du gi kilder til forskjellige font-typer det samme.
Bruke @ fontface
@ Font-face { font-family: 'CalligraphyFLFRegular'; src: url ('CalligraphyFLF.eot'); src: lokal ('CalligraphyFLF'), lokale ('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 ("fonter / font_filename.eot"); src: lokal ("Alternativt navn"), lokalt ("Alternatename"), url ("fonter / font_filename.woff") format ("woff"), url ("fonter / font_filename.otf") format ("OpenType"), url ("fonter / font_filename.svg # font_filename") format ("SVG"); } H2 {font-family: "Your skriftsnitt", Georgia, serif;}
Som du kan se av eksempelet ovenfor, å inkludere den valgte skriftsnitt, må man koble til et sett av fonttypes for samme skriftsnittet. Derfor folk referere til det som "Skrift Kit".
Det er Font Kits tilgjengelig som eksplisitt tillater linking med CSS @ font-face eiendom til den under End User License Agreement (EULA).
Nyttige WebFont Ressurser:
Med min begrensede ferdigheter sett med verktøy som Photoshop og Illustrator, kan jeg ærlig innrømme at jeg er en bedre utvikler enn jeg er en designer. Men min bakgrunn med kjerne (server side) utvikling med Java / PHP / COBOL, har vært en svært positiv innvirkning på mine UI utviklingen ferdigheter. Hva jeg mener er, mens skape mine motiver, dvs. når jeg gjør design, tenker jeg på hvordan design kan bli best mulig konverteres til HTML-CSS og mens de gjør det HTML-CSS, gir jeg en tanke om backend teknologi og gjøre rimelig sikker at HTML enkelt kan implementeres i XSL sløyfer eller PHP tekstbiter etc.
Over årene har jeg blitt kastet hodet på design av brukergrensesnitt designere som sannsynligvis donot har en anelse hva HTML eller CSS er. Alle disse årene har jeg tenkt at jeg ville spørre om for mye, hvis jeg bare venter designeren, som prøver å shov hans "umulig å kode" design ned halsen min, å forstå litt hva hans design ville bli konvertert inn. Det ville hjelpe rett?
Deretter kom jeg over dette innlegget i dag ... Webdesignere som ikke kan kode ... Takk Herren! Jeg er bare en av mange som føler det samme ... Det ovenstående artitle er litt lang omstendelig .. men verdt lese hvert ord av det.
Takk Elliot Jay Stocks ... Jeg føler lettet!
Her er noen utdrag fra Elliots artikkelen .
Ærlig talt, jeg sjokkert over at i 2010 jeg fortsatt kommer over 'Choice webdesignere' Hvem kan ikke kode sine egne design. Ingen unnskyldning.
... Jeg skulle ha vært litt mer spesifikk i tweeten min. Jeg snakket om designere som ikke har selv de mest grunnleggende HTML og CSS ferdigheter til å slå en flat design i en faktisk side. Ikke folk som forsettlig velger å ikke kode, de som ikke kan. Og jeg også henvise kun til front-end kode her; selvfølgelig er det latterlig å tro at designere bør også være fantastisk back-end programmerere ...
Vi får 'web' design sendt i Illustrator, 300dpi, umulig å kode, ingen konsistens / brukervennlighet.
~ Amy Mahon
Det begynner å bli sent, og jeg har fått til å pakke opp dette liksom. Jeg vet det vil være mange som er uenige med meg, og min intensjon er ikke å fornærme eller opprørt noen som ikke kan kode, men jeg håper at noe av det jeg har sagt gjenspeiler noen av de punktene som alltid kommer opp når hulene i denne debatten.
På slutten av dagen, jeg ikke miste noe søvn over hvem som kan kode, og som ikke kan. Jeg er bare oppriktig overrasket over å finne så mange designere som mangler front-end ferdigheter, som jeg trodde dette var en saga blott.
Også lese kommentarene, var det rundt 320 kommentarer, mens jeg skriver ... de er verdt en leser.
Vennligst les Elliots hele innlegget her .. Webdesignere som ikke kan kode
Siden radio knappen og teksten er inline, slik at teksten vil innrette seg til bunnen av radioen knappen, vil teksten synes å være litt under radioknappen.
Hvis du ønsker disse å justere til topps, må du plassere radioen og teksten i egne beholdere som divs eller spenn (som aktuelt), og de vil ta vare på justeringen. Det ville være lettere å bruke tabellceller også, av briefen tillater det.
Dette vil ikke se det samme i alle nettlesere, som alle nettlesere viser radioer litt forskjellig, så det finnes alltid kommer til å være størrelse problemer uansett hva du gjør.
HTML5 er fortsatt et utkast. Som jeg skriver, Arbeid på fem HTML, som startet i 2004, blir fortsatt gitt form av en felles innsats mellom W3C HTML WG og WHATWG . Ordet er at neste generasjon HTML vil ha forbedringer og funksjoner, som ville ny struktur og semantikk, skjemakontroller, APIer, multimedia tags etc..
I enkel engelsk ... hva ville det bety for oss UI utviklere ...
<body> <header> ... </ header> <nav> ... </ nav> <article> <section> ... </ Seksjon> </ Artikkel> <aside> ... </ tilside> <bunntekst> ... </ 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>
f.eks
<video poster="poster.jpg"> <Source src = "video.3gp" type = "video/3gpp" media = "håndholdt"> <source src="video.mp4" type="video/mp4"> </ Div> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </ Lyd>
Det er mange flere endringer / oppgraderinger til den nyere versjonen ... Vil holde oppdatere dette innlegget som jeg risikere å møte noen interessante nyttige seg .... Se denne plassen
Dette dokumentet kan ikke gi nøyaktige opplysninger som HTML 5-spesifikasjonen er fortsatt aktivt i utvikling. Når du er i tvil, sjekk alltid HTML 5-spesifikasjonen her .
Tid og om igjen, når alle de andre nettleserne sett å oppføre seg som sagt av W3C reglene, dvs. spiraler deg ut av utviklingen ånd ved å kaste et raserianfall, som ikke synes å ha en fix. Bare en slik en er dette problemet i IE7.
Problem Statement:
Jeg og så kunne mange av de andre alvorlige webutviklere har lagt merke til mer enn mange ganger, at når det nestet flyter i oppsettet, på svever over noen linker (ankerkoder), synes inneholder beholderen til å skifte noen få piksler til høyre . Jeg har prøvd å google løsninger for dette problemet, men har neppe funnet noen fornuftig svar på hvorfor og når det skjer (som kan bidra til å forebygge dette problemet skjer), derav jeg aldri har funnet en klar løsning på problemet heller ...
Mulig løsning:
Ut av erfaring, har jeg beskjed 90% prosent av den tiden det vil si, at dette problemet er løst ved å legge en zoom eiendom i CSS definisjonen av mis-oppføre container ...
# Somediv { zoom: 1; }
igjen grunnene er tvetydige ... prøv denne ...
Enkelte elementer i IE har en "hasLayout" eiendom, som er "sant" som standard. Mange visuelle CSS atferd, for eksempel, fungerer en alpha filter bare på ett element som hasLayout. og {Zoom: 1} synes å gi målet elementene den hasLayout eiendommen .... Nyttig? Jeg tror ikke det ...
Zoomen eiendommen synes også å støttes av Chrome, men bruken dint synes å gjøre mye negativ effekt på layout min ... prøv det, hvis det fungerer for deg ... hvis den ikke gjør det, bokmerke denne siden under "CSS craps"
