Čitao to na neki blog ... mislila da je to lijepo katalogiziranje to za buduće ref .... Također bi moglo biti važno pitanje intervju da bi pitao neki dan ....
Napišite isječak CSS koji će se prikazati odlomak u plavom u starijim preglednicima, crveno u novijim preglednicima, zelene i crne u IE6 IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Imao čudan problem, gdje je radio komad JavaScript u redu u svim preglednika ans su uobičajene bar IE 
... Jednostavno je to, ali budući da je pismo nije napisano po meni, to je neko vrijeme za ispravljanje ovu "Objekt ne podržava ovo svojstvo ili metodu" greška da samo IE je bacanje gore. Vjerojatno! Da sam napisati scenarij, ne bih dobio ovu pogrešku na sve, kao ne miješati svoje varijabilne imena s polja IDS :).
Problem: Objekt ne podržava ovo svojstvo ili metodu (na liniji 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Rješenje:
Pogreška nastaje na thirdrow u gornjem primjeru (linija 3 ... "shortdesc = document.getE ...."). Pokušao sam sve vrste gluposti, da ja dont još vrijedi spomenuti ovdje i na kraju pogodite što! samo mijenja shortdesc var na nešto drugo je dobio osloboditi od pogreške. Uglavnom! Ime varijable morao razlikuje od fieldID
Za nekoliko sati sada sam gleda na rješenja za pokretanje / testiranje moje statičke HTMLs u Eclipse / Android emulator. Nisu bili potpuno uspješni još .... ono što mislim pod "Ukupno" je HTML se ucitava OK, ali sve CSS i JS, odnosno vizualni izraz ne vidi. U razvojne riječima, CSS se ne primjenjuje na stranicu ...
Mislio da će to nekoliko kolega Newbie Android programeri UI, ako sam primijetila isječak dolje da se koristi za prikaz HTML-a.
I Android gurui, dodajte svoje komentare kako bi nam pomogli novaka u mobilnim programerima aplikacija UI dalje!
Žao nam je! Im ali uz pretpostavku da znate kako stvoriti Android mobilnu aplikaciju u Eclipse.
Napravite to kao svoju djelatnost, a to će pročitati datoteke 'index.html' iz svoje imovine projekta / folder.
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(); } } } Ponovno Biciklizam je Buzzword U web razvoj i to znači da ne razlikuje. Štedi energiju, u smislu napora!
Tijekom godina pisanja CSS i stvaranje HTML od dizajna, ja sam nakon nekoliko najboljih praksi, u potrazi za uštedu vremena i energije u ono što se obično pojam kao "Re-inventing Wheel". Vrijeme i vrijeme opet, ja sam sebi rekao da moram stvoriti nekoliko predložaka, neki standardni re-korisna CSS da bih koristiti OUT okvira u mom budućem radu. Iako nije u potpunosti, ali sam uspio ostvariti neke ciljeve.
U daljnjem, ponovno korištenje CSS, morao sam pogledati nekoliko CSS okvirima koji su obično dostupni nama i odlučili staviti ih na korištenje, kao što su to pokušao i testirani i stvorio mnogo iskusnih developera, tada sebe. Što je još važnije "IZBJEGAVATI RE-OSMIŠLJANJE".
Iako je poznato da veterana, pokušao sam da pero neki ključni koncepti / najbolje prakse / misli da je otišao u stvaranju takvih okvira, kako bi RE-BICIKLIZAM CSS moguće. Nadam se da će to pomoći oko CSS razvijatelja koji su samo o to i nedavno ukrcali CSS bandwagon!
Koristite konvenciji imenovanja
To mora biti najvažniji faktor u izradi CSS / HTML ponovno koristiti. Davanje u skladu imena elemenata stranice omogućuje ponovno korištenje stranice komponenti i njihovih stilova s malo ili promjenama. U skladu s tim argumentom, čak i HTML5, u veliku promjenu promjene tijekom svojih prethodnika, je predstaviti neke strukturne oznake viz. <article>, <section>, <header>, <aside> i <nav> [ Što će HTML5 donijeti? ]. Čak i uz HTML 4 (ili manje), najbolje je da spomenemo standardne dijelove stranici consistanly kao u jednostavnom primjeru u nastavku ...
Zapamtite, većina stranice na svoj projekt, završiti imaju iste osnovne elemente. Prepoznaju ove zajedničke elemente stranice osnovne ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Ponovno postavljanje zadane stilove (CSS Resetiranje): Bilo da koristite okvir ili pisati svoj vlastiti, morate CSS Vraćanje [ Što su CSS Resetiranje? ], kao što su smanjiti ili eliminirati ponekad vizualne nedosljednosti koje se pojavljuju između različitih preglednika. U jednostavnim riječima Mehanizam CSS Reset postavlja stilova HTML element na nula ili null vrijednosti, od tuda glavne nikakve vrijednosti zadani preglednik oni svibanj poza. To daje čistu škriljevca za postavljanje svojstva tih elemenata praznina bilo User-Agent [Zadane CSS2.1 Korisnički Agent style sheet Defaults ]. Svi CSS okviri nemaju od reset mehanizma. Ako pišete vas vlastiti CSS Vraćanje, riječ oprez je da ako vam se dogoditi da zaboravite resetirati ključnu imovinu, to bi moglo dovesti do cross-preglednika pitanjima, koji su vrlo teško za ispravljanje. Sjeti se, zadržati kopiju ponovno postavljanje stilova i ispustite ih u svaki novi projekt koji ste stvorili.
tijelo, div, dl, dt, dd, ul, ol, li, H1, H2, H3, H4, H5, H6, unaprijed, oblik, fieldset, ulaz, odaberite, tekstualno polje, p, blockquote, stol, th, td { border: 0px; margin: 0; padding: 0; }
Postavljanje zadane (osnovne stilovi) na elemente:
Nakon što ste postavili (na nulu ili NULL) zadane vrijednosti pojedinih atributa određenih HTML elemenata, potrebno je primijeniti neke stilove diljem svakom slučaju tih elemenata. Ovo zadana postavka može se razlikovati po dizajnu ili prema najbolje prakse koje pratite.
Većina CSS okviri, uvijek uvodi neke nove zadane, osim resetiranja stilova zadani preglednik.
Ti se ispuni prazninu u User-Agent (Zadane uklonio je CSS Reset), te će biti dosljedni u cijeloj preglednicima.
Zapamtite, Osnovni stilovi koriste za postavljanje stilova koji će se koristiti dizajn širok. npr..
html {font-size: 77%; font-family: Arial, sans-serif;} jaka, H1, H2, H3, H4, H5, H6 {font-weight: bold;}
Sažetak HTML stilovi za zajedničke dijelove i zajedničke razredi:
Najveći projekt koji se sastoji od nekoliko stranica imat će zajedničke HTML elementi preko Web stranica, npr. neke vrste obrazaca, upozorenja i pogreške, Custom pučanstvo, LightBoxes itd. Budući da su takve komponente se ponovo preko projekata, to će biti korisno za pružanje skup klasa povezanih s prethodno definiranih stilova za tih komponenti i možete uštedjeti puno vremena.
Osim definiranja reusable definicije stilova za HTML zajedničkih komponenti, mogli bismo apstraktne klase stilova koji se odnose na tipografiji, boje ili čak izgleda. Ja sam obično koristite ... zajedničke klase poput Clearfix i Font08 i FontGrey i AlignL i DisplayB itd.
Obrazac za ulaz {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; visina: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;} Obrazac tekstualno polje {border: 0px; background: # FFFFFF; boja: # 000000; font-size: .9 em; line-height: 1.5em; overflow: vidljivi;} . Fbold {font-weight: bold; color: # cccccc;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {jasna: i;} . Divider {border-top: 1px solid # 647B06, granični dna: 1px solid # 9CC00A, visina: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: right}. Alignc {text-align: centar} . Floatr {float: right;}. Floatl {plovak: lijevo;}
Popravci uobičajenih preglednika Igra riječima
Različiti preglednici provesti CSS kod i osigurati različit stupanj podrške za CSS specifikacijama. Rezultat toga .... "Browser" quirks, da smo programeri napustili kako bi se borila. Napose, IE6 proganja najviše CSS kodera s roka u susret. Dobra vijest je iskustvo okupio moguće reusable popravke na ova pitanja (često nazvao kao CSS Hacks ).
Sjeti se, zadržati te hack / popravci ruci
/ * Slijedeće zoom: 1 pravilo je posebno za IE6 + IE7. * / * Html. Clearfix, *:. Prvo dijete + html clearfix { zoom: 1; }
Držite Pročišćavanje Vaše CSS
Konačno. Ako ste inspirirani i namjeravam koristiti jedan ili više okvira CSS, evo brzo je popis nekoliko popularnih one ....
Ne zaboravite, korištenjem CSS okvira ne znači da ste lijeni stvoriti jedan od vlastite ... To znači da ste pametni da uče od drugih iskustva i pogreške, uštedjeti vrijeme i povećati produktivnost!!
CSS završili 10 godina postojanja ove godine! Oni koji su oko za neko vrijeme, zarađivati svoj kruh (ili ne) koristeći CSS, onda možda svjesni koliko smo natašte za dobar odabir fontova. Čak i uz nedostatak fontova dizajneri poput onih na CSS Zen Garden su koristili CSS pozadinske slike koja će zamijeniti fontove u potrazi za događaj neki pravdu svojim dizajnom. Također smo pokušali Flash / JavaScript ® hack kako bi se postigla svoje ciljeve dizajn. Nipošto to je pogrešan način da biste dobili fontove želimo na našim web dizajna, ali definitivno nije najpoželjniji način. i više godina, web dizajner, poput mene, u potpunosti su se oslonili na deset ili tako fontova za svojim dizajnom.
Nedavni događaji u web standarda i formata fonta bi bilo moguće donijeti HTML tekst u slogove drugih od istih starih zadanih fontova. Dolazi u "@ Font" CSS decleration.
@ Font provids rješenje za povezivanje sa stvarnim fonta datoteku i preuzimanje s weba. Korištenje mijenjate brzine Font, dizajneri mogu koristiti fontove bez zamrznuti tekst kao pozadinske slike. Provedba je vrlo ravno naprijed, kao što je prikazano u nastavku, ali i sve dobre stvari imaju CON dio njega, nisu svi preglednici podržavaju jednu "vrstu fonta". Ako planirate koristiti mijenjate brzine Font na stranice sa zahtijevaju križ preglednik podrška, onda ćete morati osigurati izvore na različite font-vrsta isto.
Korištenje mijenjate brzine Font
@ Font-face { font-family: "CalligraphyFLFRegular '; src: url ('CalligraphyFLF.eot'); src: mjesni ('CalligraphyFLF'), lokalne ('CalligraphyFLF'), url ('CalligraphyFLF.woff') format ('woff'), url ('CalligraphyFLF.ttf') format ("TrueType"), url ('CalligraphyFLF . svg # CalligraphyFLF ') format ("svg'); } @ Font-face { font-family: "Vaš tipografiju"; src: url ("fontovi / font_filename.eot"); src: mjesni ("Alternativni ime"), lokalne ("Alternatename"), url ("fontovi / font_filename.woff") format ("woff"), url ("fontovi / font_filename.otf") format ("OpenType"), url ("fontovi / font_filename.svg # font_filename") format ("SVG"); } h2 {font-family: "Vaš tipografiju", Gruzija, serif;}
Kao što možete vidjeti iz gornjeg primjera, da su izabrani slovima fonta, treba povezati skup fonttypes za isti slovima. Dakle ljudi nazivaju "Font Kit".
Postoje slova Kits na raspolaganju da se eksplicitno omogućuje povezivanje s CSS mijenjate brzine font-face imovine njemu pod End User License sporazuma (EULA).
Korisni WebFont Resursi:
S mojim ograničenim vještina skupa s alatima kao što su Photoshop i ilustrator, ja mogu iskreno priznati da sam bolji programer od mene dizajner. Ali moja pozadina s jezgrom (server side) razvoj s Java / PHP / COBOL, bio je vrlo pozitivan utjecaj na razvoj korisničkog sučelja svojim vještinama. Ono što hoću reći je, uz stvaranje moje dizajne, tj. kad god trebam učiniti dizajn, mislim o tome kako dizajn može se najbolje pretvoriti u HTML-CSS-a dok radi HTML-CSS, dajem misao o backend tehnologije i čine razumno sigurni da je HTML možete lako primijeniti u XSL petlje ili PHP isječke, itd.
Tijekom godina, ja sam bio bačen glavu na nacrtima UI dizajnera koji su vjerojatno donot imaju pojma što je HTML ili CSS. Sve ove godine sam razmišljao da ću tražiti previše, ako ja samo očekujem dizajner, koji pokušava shov njegov "nemoguće koda" dizajn niz moje grlo, shvatiti samo malo što je njegov dizajn bi se pretvoriti u. To bi pomoglo zar ne?
Zatim, JA je došao preko ovaj post danas ... web dizajnera koji ne mogu kod ... Hvala Gospodine! Ja sam samo jedan od mnogih koji se osjećaju isto ... iznad artitle je malo dugo daha .. ali vrijedan čitanja, svaka riječ o tome.
Hvala Elliotovih Jay dionice ... Osjećam olakšanje!
Ovdje je nekoliko izvadaka iz Elliots članka .
Iskreno, ja sam šokiran da je u 2010 Ja sam još uvijek dolaze preko "Web dizajnera 'koji ne mogu kod svoje vlastite dizajne. Nema isprika.
Ja bi trebao ... bili malo precizniji u mom cvrkut. Ja sam govorio o dizajnera koji nemaju ni osnovne HTML i CSS vještine za uključivanje stan dizajn u stvarni stranice. Ne ljudi koji namjerno izabrati da ne, kod onih koji ne mogu. I ja sam također odnosi samo na front-end kod ovdje, naravno da je smiješno da mislim da dizajneri također bi trebali biti iznenađujuće back-end programera ...
Mi smo dobili 'dizajn Web je poslao u Illustrator, 300dpi, koje je nemoguće koda, ne dosljednost / upotrebljivosti.
~ Amy Mahon
To je sve kasno, a ja sam dobio da zamotate ovaj gore nekako. Znam da će mnogi koji se ne slažu sa mnom, a moja namjera nije uvrijediti ili uznemiriti nikoga tko ne može kod, ali nadam se da su neki od ono što sam rekao odražava neke od točaka koja uvijek dolaze kad delving ta rasprava.
Na kraju dana, ja ne izgubiti bilo koji spavaju oko toga tko može kodirati i koji ne mogu. Ja sam samo istinski iznenađen pronaći toliko dizajnere da nedostaju vještine front-end, kao što sam mislio da je to stvar prošlosti.
Također pročitajte komentare, bilo je oko 320 komentara, kao i pisati ... oni su vrijedan čitanje.
Molimo Vas pročitajte Elliots cijeli post ovdje .. Web dizajneri koji ne mogu kod
Budući da je radio gumb i tekst su u liniji, tako da tekst će se poravnati na dno radio gumb, tekst će se pojaviti biti malo pod radio gumb.
Ako želite to poravnati na vrhu, morat ćete staviti radio i tekst u zasebne kontejnere kao što divs ili premošćuje (prema potrebi) i oni će voditi brigu o usklađenosti. Bilo bi lakše koristiti tablice stanice previše, je vaš dizajn kratak to dopušta.
To neće izgledati isto u svakom browseru, kao i svaki preglednik prikazuje radio malo drugačije, tako da je uvijek će biti veličine problema bez obzira na to što radite.
HTML5 je još uvijek nacrt. Kao što sam pisati, Rad na HTML-u 5, koji je započeo u 2004, još uvijek se daje oblik koje zajednički napor između W3C HTML RS i WHATWG . Riječ je da će se sljedeći HTML gen imat će poboljšanja i značajke, što bi nova struktura i semantika, oblik kontrole, API, multimedija oznake itd..
U jednostavnom engleskom jeziku ... što bi značilo da nas UI programere ...
<body> <header> ... </ zaglavlje> <nav> ... </ nav> <article> <section> ... </ Dio> </ Članak> <aside> ... </ strani> <footer> ... </ podnožje> </ Body>
Umjesto
<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>
npr.
<video poster="poster.jpg"> <Izvor src = "video.3gp" type = "video/3gpp" Mediji = "ručni"> <source src="video.mp4" type="video/mp4"> </ Video> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </ Audio>
Postoji mnogo više promjena / nadogradnje na noviju verziju ... Hoće li zadržati ažuriranja ovaj post kao što sam naići sve one zanimljive korisni .... Pogledajte ovaj prostor
Ovaj dokument se ne može dati točne informacije kao HTML 5 specifikacija je još uvijek aktivno u razvoju. Kada su u nedoumici, uvijek provjerite specifikacije HTML 5 ovdje .
Vrijeme i opet, kada su svi ostali preglednici vidio da se ponašaju kao što je rekao po W3C pravila, tj ako spirale izvan razvoja duha bacajući tantrum, to ne činiti se to imati popraviti. Baš kao što je to jedan problem u IE7.
Problem Statement:
Ja i tako možda mnogih drugih ozbiljnih web programeri su primijetili više nego mnogo puta, da kada se ugniježđena pliva u izgledu, o prelazite preko neke veze (sidro tags), koji sadrži spremnik čini pomak nekoliko piksela desno . Pokušao sam na Google rješenja za taj problem, ali su teško pronaći bilo koji razuman odgovor na zašto i kada se ona pojavi (koje bi mogle pomoći da se spriječi ovaj problem iz događa), pa nisam našao jasnu rješenje problema ili ...
Moguće rješenje:
Iz iskustva, imam obavijest 90 posto posto od puta, odnosno, da je ovaj problem riješen dodavanjem zoom nekretnine u CSS definiciji pogrešno ponašaju kontejner ...
# Somediv { zoom: 1; }
opet razlozi su dvosmislene ... probajte ovo ...
Neki elementi u IE imati "hasLayout" imovine, što je "istina" po defaultu. Mnogi vizualni CSS ponašanja, na primjer, alfa filter radi samo na element koji hasLayout. i {Zoom: 1} Čini se da ciljnim elemente u hasLayout imovine .... Korisni? JA dont misliti tako ...
Zum Objekt se čini da podržava Chrome, ali je njegova uporaba utisak čini se da bi puno negativan utjecaj na moj izgled ... probati, ako to radi za vas ... ako ne, Označite ovu stranicu u "CSS craps"
