Če bi to prebral v nekem blogu ... mislil, da je lepo, da je ta katalog za prihodnje ref .... Prav tako bi bilo pomembno vprašanje, intervju, ki bi jo vprašal nekoč ....
Napišite košček CSS, ki se prikaže na odstavek v modrem v starejših brskalnikih, rdeče novejših brskalnikov, zelene IE6 in črni barvi, v IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Če bi to čudno vprašanje, če je kos Javascript delal globe v vseh brskalnika ans kot običajno vrstico IE 
Enostavno ... je bilo, ker pa je bil scenarij ni napisal zame, je vzel nekaj časa za odpravljanje napak to "Predmet ne podpira te lastnosti ali načina" napako, da je le IE je metanje gor. Verjetno! Če bi napisali scenarij, jaz ne bi dobil to napako sploh, ker ne smemo mešati moje imeni spremenljivk s polja ID-ji :).
Problem: Predmet ne podpira te lastnosti ali načina (on-line 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Rešitev:
Napaka se generira na thirdrow v zgornjem primeru (linija 3 ... "shortdesc = document.getE ...."). Poskušal sem vse vrste neumnih stvari, ki sem dont je tudi vredno omeniti tukaj in na koncu veš kaj! samo spremembo var shortdesc v nekaj drugega znebili napake. V bistvu! Ime spremenljivke je bilo drugačno od fieldID
Za nekaj ur zdaj sem iskal na rešitev za zagon / preveriti svoje statične HTMLs v emulator Eclipse / Android. Niso bili povsem uspešni še .... kaj mislim s "Popolnoma" je HTML gets naložen v redu, ampak vse, CSS in JS, to je vizualno izražanje ni videl. V razvijalce besedami, CSS ne uporablja na stran ...
Mislil, da bi nekaj kolegi newbie Android UI razvijalci, če bom ugotovil, da košček navzdol, da sem se uporablja za prikaz HTML.
IN Android guruji, dodajte svoje komentarje, da bi nam novinci v mobilnih razvijalce uporabniškega vmesnika aplikacijskih še!
Žal mi je! ampak Im ob predpostavki, da veste, kako ustvariti Android mobilno aplikacijo v Eclipse.
Ustvari to vašo dejavnost, kar bo prebral datoteko 'index.html' iz svojih sredstev projekta / mapo.
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-Kolesarjenje je buzzword in v razvoj spletnih strani, to pomeni nič drugače. To varčuje z energijo, z vidika truda!
Več letih pisanja CSS in ustvarjanje HTML od modelov, ki sem sledil nekaj najboljših praks pri uresničevanju prihranek časa in energije, v kar smo pogosto izraz kot "Re odkrivanja tople vode". Znova in znova, sem si rekel, da moram ustvariti nekaj predlog, nekateri standardni ponovno uporabiti CSS, da bi uporabil Out of the Box v svojem nadaljnjem delu. Čeprav ne povsem, ampak nisem uspela doseči nekatere cilje.
Pri pospeševanju, Ponovna uporaba CSS, sem imel pogled na nekaj okvirov, ki so pogosto CSS nam na voljo, in odločil, da jih uporabljajo, saj so te preizkušena in ustvaril veliko izkušenih razvijalcev, ki od sebe. Še pomembneje "IZOGNITE PONOVNO Iznajdba".
Čeprav je splošno znano, da veterani, sem poskušal pero nekateri ključni koncepti / najboljših praks / misli, da je šlo v ustvarjanje teh okvirov, da RE-KOLESARJENJE CSS mogoče. Upam, da bo to pomagalo nekaj CSS razvijalcem, ki so tik pred kratkim in se vkrcali na bandwagon CSS!
Uporaba poimenovanje konvencij
To mora biti najpomembnejši dejavnik pri tem, da CSS / HTML ponovno uporaben. Dajanje doslednih imena elementov strani omogoča ponovno uporabo strani sestavin in njihovih stilov z malo ali sprememb. V skladu s tem argumentom tudi HTML5, na velike spremembe sprememb preko svojih predhodnikov, je uvesti nekatere strukturne viz oznak. <article>, <section>, <header>, <aside> in <nav> [ Kaj bo prinesla HTML5? ]. Tudi z HTML 4 (ali manj), je najbolje, če jih naštejemo standardne dele vaše strani consistanly kot v spodnjem primeru preprosto ...
Ne pozabite, da večina strani na svoj projekt, na koncu ima enake temeljne strukturne elemente. Prepoznavanje teh skupnih elementov strani temeljne ....
<div id="container"> <div id="header"> ... </ p> <div id="nav"> ... </ p> <div id="sidebar"> ... </ p> <div id="footer"> ... </ p> </ P>
Ponastavi privzete sloge (CSS Ponastavi): Ali uporabljate okvir ali pisati svoje, morate zagotoviti Resetira CSS [ Kaj so Ponastavi CSS? ], kot so zmanjšanje ali odpravo včasih vizualne nedoslednosti, ki se pojavljajo med različnimi brskalniki. V preprostih besedah Reset CSS mehanizem določa sloge HTML element z nič ali null vrednosti, kar zabrisala vse privzete vrednosti brskalnika, ki jih lahko predstavlja. To zagotavlja čisto skrilavca, da nastavite lastnosti te praznine elementov vseh User-Agent kršitev, [ CSS2.1 uporabnika Agent Defaults slogi ]. Vse CSS okviri pa so od ponovne mehanizma. Če pišete ste lastnik Resetira CSS, beseda previdnosti je, da če se zgodi, da pozabite ponastaviti ključno lastnost, bi to lahko pripeljalo do vprašanj, navzkrižno brskalnika in ki so zelo težko debug. Ne pozabite, hranite kopijo obnovljena stilov in spustite jih v vsakem novem projektu, ki ga ustvarite.
Telo, div, dl, dt, dd, ul, ol, li, H1, H2, H3, H4, H5, H6, vnaprej, oblika, fieldset, vložek, izberite, textarea, p, blockquote, miza, th, td { meja: 0px; margin: 0; padding: 0; }
Set Defaults (osnovna stili) na postavke:
Ko ste nastavili (nič ali null) privzete vrednosti nekaterih lastnosti nekaterih elementov HTML, je treba uporabiti nekatere sloge po vsej vsakem primeru teh elementov. To privzeta nastavitev lahko razlikujejo, kot na oblikovanje ali glede najboljše prakse, ki jih spremljate.
Večina okvirov CSS, vedno uvaja nekatere nove privzete nastavitve, poleg ponastavitvi privzetih slogov brskalnika.
Te privzete da praznine od User-Agent kršitev, (otrese jih Reset CSS), bo to veljalo tudi brskalnikov.
Ne pozabite, da se Osnovni stili uporabljajo za določitev slogov, ki jih bodo uporabljeni oblikovanje svetu. npr.
html {font-size: 77%, font-family: Arial, sans-serif;} močan, H1, H2, H3, H4, H5, H6 {font-weight: bold;}
Povzetek Slogi za skupne HTML Komponente in običajne vrste:
Večina projekt sestavljen iz več strani bo imel skupne elemente HTML, ki se uporabljajo po vsem mestu, na primer neke vrste obrazcev, opozorila in napake, ki meri ljudstvo, ki LightBoxes itd Ker so te komponente uporabljajo znova čez projektov, bi bilo koristno za zagotovitev nabor razredov, povezanih z vnaprej določenih slogov za te komponente in jih lahko shranite si veliko časa.
Poleg opredelitev pojmov ponovno uporabo slogov za skupne HTML komponent, bi lahko abstraktni razredi stili, ki se nanašajo tipografije, barve ali celo postavitev. Sam sem pogosto uporabljate ... skupne razrede, kot so Clearfix in Font08 in FontGrey in AlignL in DisplayB itd
Obrazec za vnos {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; višina: 26px; color: # 000000; line-višina: 30px; font-size: 1.1em;} Obrazec textarea {border: 0px; background: # FFFFFF; color: # 000000; font-size: .9 em, line-višina: 1.5em; overflow: vidna;} . Fbold {font-weight: bold; color: # CCCCCC;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {jasen: oboje;} . Delilnik {meji-top: 1px solid # 647B06; meja bottom: 1px solid # 9CC00A, višina: 0px;} . Displayb {zaslon: blok;}. Displayn {display: none;} . Alignr {text-align: right}. Alignc {text-align: center} . Floatr {float: right;}. Floatl {float: left;}
Popravki na skupnih quirks brskalnika
Različni brskalniki izvajati CSS kodo in zagotavljajo različno stopnjo podpore specifikacije CSS. Rezultat tega .... "Brskalnika quirks", da smo pustili razvijalci za reševanje. Še posebej, IE6 preganja najbolj CSS kodirniki z rokom za izpolnitev. Dobra novica je, izkušnje so skupaj prinesla morebitne popravke ponovno uporabo teh vprašanj (pogosto označilo kot Hacks CSS ).
Ne pozabite, Naj ti hacks / določa priročna
/ * Naslednje zoom: 1 pravilo je, posebej za IE6 ± IE7. * / * Html. Clearfix, *:. Prvi otrok + html clearfix { zoom: 1; }
Naj Izboljšanje Vaš CSS
Končno. Če ste navdih in nameravajo uporabiti enega ali več okvirov CSS, vsepovsod je hiter seznam nekaj pogosti pa ....
Ne pozabite, z uporabo CSS okvirov ne pomeni, da ste leni, da ustvarite eno svojo ... To pomeni, da ste pametni, da se učijo iz izkušenj drugih in napak, prihranila čas in povečala PRODUKTIVNOSTI!!
CSS zaključil 10 let obstoja letos! Tisti, ki so bile približno za nekaj časa, zaslužil svoj kruh (ali ne) z uporabo CSS, potem ste morda zaveda, kako smo bili lačni za dobro izbiro pisave. Tudi s pomanjkanjem pisave oblikovalci, kot so tiste, na vrtu CSS Zen so uporabile ozadja CSS za zamenjavo pisave, v prizadevanju za pravičnost delaš nekaj svojih modelov. Prav tako smo poskušali Flash / JavaScript hacks ® za dosego naših ciljev oblikovanja. Nikakor ne gre za napačen način, da dobite pisave želje v naših spletnih modelov, vendar pa zagotovo ni najbolj zaželen način. in več let spletni oblikovalec, kot sem jaz, so v celoti oprla na deset ali tako pisav za svoje modele.
Nedavni dogodki v spletnih standardov in pisav formati omogočajo, da postane besedilo HTML v tipografij, ki niso iste stare privzete pisave. Prihaja v "@" fontface decleration CSS.
@ Fontface provids rešitev za povezavo z dejansko datoteko pisave in jo naložite s spleta. Uporaba je @ fontface lahko oblikovalci uporabo pisav ne da bi morali zamrzniti besedilo kot slike za ozadje. Izvajanje je zelo naravnost naprej, kot je prikazano spodaj, ampak kot vse dobre stvari, ki imajo CON dela z njim, niso vsi brskalniki podpirajo eno "vrsto pisave". Če nameravate uporabiti je @ fontface v mestu z zahtevo, navzkrižno brskalnika podporo, nato pa boste morali zagotoviti vire za različne vrste font-teh.
Uporaba je @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular"; SRC: url ("CalligraphyFLF.eot '); SRC: lokalni ("CalligraphyFLF), lokalni (" CalligraphyFLF), url ("CalligraphyFLF.woff") format ("woff), url (" CalligraphyFLF.ttf ") format (" TrueType), url ("CalligraphyFLF . SVG # CalligraphyFLF ") format (" SVG "); } @ Font-face { font-family: "Vaša tipografija"; SRC: url ("pisave / font_filename.eot"); SRC: lokalni ("nadomestni ime"), lokalni ("Alternatename"), url ("pisave / font_filename.woff") format ("woff"), url ("pisave / font_filename.otf") format ("OpenType"), url ("fonti / font_filename.svg napake # font_filename") format ("SVG"); } H2 {font-family: "Vaša Pisava", Gruzija, serif;}
Kot lahko vidite iz zgoraj primer, da so izbrane tipografije pisav, se je treba povezati na niz fonttypes za isto obliko pisave. Zato ljudje imenujejo tudi "Kit pisave".
Obstaja pisave kompleti voljo, da izrecno omogoča povezovanje s CSS je @ font-face premoženja, ki mu ga po pogodbi za končnega uporabnika (EULA licenca).
Koristni viri WebFont:
Z mojo omejeno sposobnostjo dvojice z orodji, kot so Photoshop in Illustrator, lahko iskreno priznam, da sem boljši od mene razvijalec oblikovalec. Vendar pa je moj ozadje z jedrom (Strežnik stran) razvoj z Java / php / COBOL, je bil zelo pozitiven vpliv na moje uporabniškega vmesnika razvojne sposobnosti. Mislim, medtem ko ustvarjanje svoje modele, in sicer, ko sem narediti načrt, mislim, da o tem, kako je mogoče najbolje oblikovanje pretvori v HTML-SPD, medtem ko delaš HTML, CSS, sem dal misel o backend tehnologijo in se prepričajte razumno da je mogoče zlahka prenesti v HTML XSL zank ali PHP itd izrezkov
Več let, so me vrgli na glavo, da modeli, ki jih oblikovalci uporabniškega vmesnika, ki verjetno donot imela pojma, kaj HTML ali CSS je. Vsa ta leta sem mislil, da bom zahtevala preveč, če sem pričakujem oblikovalec, ki poskuša shov svoje "nemogoče" kode oblikovanja grlu, razumeti le malo, kaj bi se pretvori njegova zasnova v. To bi prav pomoč?
Potem sem prišel čez to delovno mesto ... danes spletnih oblikovalcev, ki ne morejo številka ... Hvala Gospod! Jaz sem samo ena izmed mnogih, ki menijo enako ... zgoraj artitle je malo dolgo daha .. ampak vredno branje, vsaka beseda za to.
Hvala Elliot Jay zaloge ... Počutim se odleglo!
Tukaj je nekaj odlomkov iz članka Elliots .
Iskreno, sem šokirana, da je v letu 2010 sem še vedno prihaja prek njihove spletne oblikovalcev ', ki ne morejo kode svoje modele. Ni izgovor.
... Sem morala sem bil malo bolj natančen v moji Cvrkutati. Govoril sem o tem oblikovalcev, ki nimajo niti najbolj osnovne HTML in CSS sposobnosti vrteti ravno dizajn v dejanskem mestu. Ne ljudje, ki namerno ne odločijo za kodo, tisti, ki ne morejo. In jaz sem prav tako nanaša le na kode čelni tukaj, seveda to je smešno, da razmišljajo, da oblikovalci morajo biti tudi neverjetno back-end programerje ...
Dobimo 'mreža' modele poslana v Illustrator, 300 dpi, nemogoče, da kodo, ki niso dosledni / uporabnost.
~ Amy Mahon
To je pridobivanje pozno in moram zaviti to gor nekako. Vem, da bodo mnogi, ki ne strinjate z mano, in moj namen ni žaliti ali razburjena nikogar, ki ne morejo kodo, vendar upam, da nekaj, kar sem dejal, odraža nekaj točk, ki vedno pridejo, ko delving ta razprava.
Ob koncu dneva, ne izgubijo nobenega spanja več, ki lahko kodo in kdo ne. Jaz sem samo resnično presenečeni ugotovili, da veliko oblikovalcev, ki nimajo front-end spretnosti, kot sem mislil, to je stvar preteklosti.
Preberite tudi pripombe, je bilo okoli 320 pripomb, kot sem napisal ... ti je vredno prebrati.
Prosimo, preberite celotno Elliots komentar tukaj .. Spletni oblikovalci, ki ne morejo koda
Ker radio gumb, besedilo pa sta vrstici, tako da bo besedilo se uskladi na dno gumb, se bo besedilo videti nekoliko pod radijski gumb.
Če želite to uskladiti do vrha, boste morali postaviti radio in besedilo v ločenih zabojnikih, kot so divs ali povezuje (po potrebi) in bodo poskrbeli za uskladitev. To bi bilo lažje za uporabo celic tabele tudi za vaš dizajn kratko to dovoljuje.
To ne bo videti enako v vsakem brskalniku, kot vsak brskalnik prikaže radio nekoliko drugače, tako da je vedno bo velika vprašanja, ne glede na to, kaj počnete.
HTML5 je še vedno osnutek. Kot sem napisal, Delo na HTML 5, ki se je začel leta 2004, še vedno daje obliko s skupnim prizadevanjem, med W3C HTML delovne skupine in WHATWG . Beseda je, da bo naslednji HTML gen imajo dodatno opremo in funkcije, ki bi nova struktura in semantika, obliko nadzora, API, multimedia oznake itd.
V preprostem angleškem jeziku ..., kaj bi to pomenilo, da nas uporabniškega vmesnika razvijalce ...
<body> <header> ... </ header> <nav> ... </ nav> <article> <section> ... </ Del> </ Article> <aside> ... </ na stran> <footer> ... </ noge> </ Body>
Namesto
<body> <div id="header"> ... </ p> <div id="nav"> ... </ p> <div class="article"> <div class="section"> ... </ P> </ P> <div id="aside"> ... </ p> <div id="footer"> ... </ p> </ Body>
npr.
<video poster="poster.jpg"> <Vir src = "video.3gp" type = "video/3gpp" mediji = "ročni"> <vrata_vira> src="video.mp4" type="video/mp4"> </ Video> <audio> <vrata_vira> src="music.oga" type="audio/ogg"> <vrata_vira> src="music.mp3" type="audio/mpeg"> </ Audio>
Obstaja veliko več spremembe / nadgradnje na novejšo različico ... Bo vodi posodabljanje na tem položaju, ko sem prišel oglasov rabljenih strojev iz vse zanimive uporabne tisti .... Oglejte si ta prostor
Ta dokument ne more zagotoviti natančne informacije v HTML 5 specifikacija še vedno aktivno na področju razvoja. Če ste v dvomih, vedno preverite HTML 5 specifikacija tukaj .
Čas in znova, ko so vsi drugi brskalniki videli, da se obnašajo, kot je povedal, pravila W3C, tj če spiral iz nje razvojnega duha z metanje Tantrum, da se ne zdi, da imajo popraviti. Samo tako je ena to vprašanje v IE7.
Problem Izjava:
I in bi tako veliko drugih hudih spletni razvijalci so opazili več kot Veliko krat, da če obstaja ugnezdenih lebdi v razporeditvi, na hover nad nekaterimi povezavami (sidro oznake), ki vsebuje posoda se zdi, da premik nekaj pik v desno . Poskušal sem na google za rešitev tega vprašanja, vendar pa so se komaj našla primerne odgovore na zakaj in kdaj se pojavi (ki lahko pomaga preprečiti te težave ne bi zgodilo), zato še nisem našel jasne rešitve problema niti ...
Možna rešitev:
Iz izkušenj, imam obvestilo 90-odstotni odstotkov krat, to pomeni, da je to vprašanje določi z dodajanjem zoom lastnost pri opredeljevanju CSS v napačno obnaša posodo ...
# Somediv { zoom: 1; }
spet so razlogi so dvoumno ... poskusite to ...
Nekateri elementi v IE imajo "hasLayout" premoženje, ki je "resnična", ki ga privzeto. Veliko vizualnih CSS vedenja, na primer alfa filter deluje samo na element, ki hasLayout. in {Zoom: 1} Zdi se, da ciljne elementa v hasLayout premoženja .... Koristne? Jaz dont mislim tako ...
Zoom lastnost je tudi zdi, da podpira Chrome, vendar je njegova uporaba Trud se zdi, da veliko škodljivega učinka na mojo postavitev ... poskusiti, če deluje za vas ... če ne, zaznamek to stran pod "craps CSS"
