Olvastam ezt a bizonyos blog ... hittem, hogy jó katalógusban a jövőbeli ref .... is lehet egy fontos kérdés, hogy interjút kért volna egy nap ....
Írj egy részlet a CSS, mely megjelenik egy bekezdést a régebbi böngészők kék, piros az újabb böngészők, zöld és fekete IE6 IE7-ben
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Vajon ez a furcsa kérdés, ahol egy darab Javascript jól működött minden böngészőben ANS szokás szerint bár az IE 
Egyszerű volt ..., de mivel a szkript nem én írtam, Eltartott egy darabig, hogy ez a hibakeresés "Az objektum nem támogatja ezt a tulajdonságot vagy a metódust" hiba, hogy csak IE-ben hányt. Valószínűleg! Ha én írni a forgatókönyvet, nem szeretném ezt a hibát már megvan minden, hiszen ne keverje össze az én változó neve mezőben azonosítói :).
Probléma: Az objektum nem támogatja ezt a tulajdonságot vagy a metódust (on line 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Megoldás:
A hiba keletkezik a thirdrow a fenti példában (3. sor ... "= shortdesc document.getE ...."). Kipróbáltam minden fajta hülyeségeket, mert nem éri meg a még itt megemlíteni, és végül mit kitalálni! A változó csak shortdesc var valami másra megszabadultak a hibát. Alapvetően! A változó nevét kellett eltér a fieldID
Néhány órával már kerestem a megoldást futtatni / teszteljem a statikus HTMLs az Eclipse / Android emulátorban. Még nem volt teljesen sikeres, de .... mit értek "Teljesen" a HTML betöltésre kerül, de minden OK a CSS és a JS, azaz a vizuális kifejezés nem láttam. A fejlesztő szóval, a CSS nem alkalmazzák az oldal ...
Gondolta, hogy néhány fiú újszülött fejlesztők Android UI Ha én megállapította, hogy a részlet le szoktam, hogy megjelenjen a HTML.
És az Android guruk, kérünk, add meg észrevételeit, hogy segítsen nekünk kezdőknek a mobil alkalmazás fejlesztői UI tovább!
Elnézést! Im, de feltételezve, hogy tudod, hogyan lehet létrehozni egy Android mobil alkalmazás az Eclipse-ben.
Hozza létre ezt a tevékenységet; Ez fogja olvasni a fájlt "index.html"-től a projekt eszközök / mappa.
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-kerékpározás Buzzword és webes fejlesztésekkel azt jelenti, hogy nincs más. Az energiatakarékos, tekintve erőfeszítést!
Évek során az írás CSS és HTML létre a terveket, követtem néhány bevált gyakorlatok, törekedve ezzel időt és energiát, amit általában, mint a "újra felfedezni a kereket". Újra és újra, én mondtam magamnak, hogy létre kell hozni egy pár sablont, néhány standard újrafelhasználható CSS szeretném használni, hogy a dobozból az én további munkához. Bár nem teljesen, de tudtam sikerül elérni bizonyos célokat.
Előmozdításában, újrafelhasználása CSS, volt egy pillantást a CSS néhány keretek, amelyek általánosan elérhető számunkra, és úgy döntött, hogy őket használni, mivel ezek kipróbált és tesztelt, és létrehozta a sokkal tapasztaltabb fejlesztők, mint én magam. Ennél is fontosabb "Ne újra felfedezni".
Bár köztudott, hogy veteránok, megpróbáltam toll néhány kulcsfontosságú fogalmak / bevált gyakorlatok / gondolatok ment bele ezekbe a keretekbe létre, hogy az újrahasznosítás CSS lehetséges. Remélem, ez segít néhány CSS fejlesztők, akik épp a közelmúltban, és felszállt a CSS zenészek kocsija!
Használja névkonvenciói
Remélem, ez lesz a legfontosabb tényező abban, hogy a CSS / HTML újrafelhasználható. Giving következetes nevek oldalelemek lehetővé teszi újrafelhasználását oldal komponenseit és stílusok, vagy kevés módosítással. Összhangban ezzel az érveléssel, még HTML5, jelentős változásokat átállás elődei, hogy bemutassam néhány strukturális címkék ti. <article>, <section>, <header>, <aside> és <nav> [ Mi lesz a HTML5 hoz? ]. Még a HTML 4 (vagy alacsonyabb), a legjobb, ha szabványos részeit megnevezni az oldal consistanly, mint az egyszerű példában ...
Ne feledd, a legtöbb oldal a projekt végén az azonos alapvető szerkezeti elemek. Határozza meg ezeket a közös központi elemeit oldalon ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Visszaállítás alapértelmezett stílusok (CSS visszaállítása): Akár a keretet, vagy írjon a saját, meg kell adnia CSS Visszaállítja [ Mik CSS Visszaállítja? ], mivel csökkentik vagy néha megszünteti vizuális ellentmondások fordulnak elő a különböző böngészőkben. Egyszerű szavakkal a CSS reset mechanizmus határozza meg a stílust HTML elem zéró vagy null értéket, így felülbírálva a böngésző alapértelmezett értékek azok jelent. Ez egy tiszta lappal állítani a tulajdonságait ezen elemek semmis minden olyan User-Agent Alapértékek [ CSS2.1 User Agent Style Sheet Alapértékek ]. Minden CSS keretek nem rendelkeznek a visszaállító mechanizmus. Ha írásban meg saját CSS visszaállítása, egy figyelmeztető szó, hogy ha véletlenül elfelejtette visszaállításához kulcsfontosságú tulajdonság, ez vezethet a kölcsönös böngésző kérdések, hogy nagyon nehéz nyomon követni. Ne feledje, tartson meg egy másolatot a reset stílusok és vidd őket minden új projektet hoz létre.
test, div, dl, dt, dd, ul, ol, li, H1, H2, H3, H4, H5, H6, pre, form, fieldset, input, select, textarea, p, blockquote, asztal, th, td { border: 0px; margin: 0; padding: 0; }
Állítsa Alapértékek (Baseline Styles) az elemek:
Miután beállította (nulla vagy üres), az alapértelmezett értékek az egyes attribútumok az egyes HTML elemek, Szükség van néhány stílus-szerte alkalmazni minden esetben ezeknek az elemeknek. Ezek az alapértelmezett beállítás változhat, mint egy a design szerint vagy a legjobb gyakorlatok kövesse.
A legtöbb CSS keretrendszerek, mindig néhány új alapértékek mellett, alapértelmezett böngésző alaphelyzetbe stílusokat.
Ezek az alapértékek, hogy érvénytelen a User-Agent Alapértékek (lehéjazott el a CSS reset), ezek lesznek konzisztensek böngészők.
Ne feledje, Baseline stílusok beállítására stílusok fognak használni design-szerte. pl.
html {font-size: 77%, font-family: Arial, sans-serif;} erős, h1, h2, h3, h4, h5, h6 {font-weight: bold;}
Absztrakt stílusok a HTML elemek közös és a közös osztályok:
A legtöbb projekt, amely több oldalas lesz közös HTML használt elemek az egész oldalon, pl Valamilyen formában, figyelmeztetések és hibák, egyéni Popups, albumok, stb Mivel az ilyen összetevőket használják újra a különféle projektek, hasznos lesz, hogy egy meg az előre definiált osztályok kapcsolódó stílusok ezek az alkatrészek, és mentheti magát egy csomó időt.
Eltekintve újrahasználható stílusokat meghatározó definíciók a közös HTML elemek, tudtuk absztrakt osztályok stílusok tartozó tipográfia, a szín, vagy akár elrendezés. Én magam inkább használ ... közös órákon, mint Clearfix, Font08, FontGrey, AlignL, stb DisplayB
form input {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; magasság: 26px; színe: # 000000; line-height: 30px; font-size: 1.1em;} formában textarea {border: 0px; background: # ffffff; color: # 000000; font-size: 0,9 em, line-height: 1.5em, overflow: visible;} . Fbold {font-weight: bold; color: # CCCCCC;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {egyértelmű: mindkét;} . Elválasztó {border-top: 1px solid # 647B06, border-bottom: 1px solid # 9CC00A, magasság: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: right}. Alignc {text-align: center} . Floatr {float: right;}. Floatl {float: left;}
Javítások a közös böngésző quirks
Különböző böngészők végre CSS kódot, és különböző mértékben támogatja a CSS-előírásoknak. Ennek az eredménye .... "Böngésző Quirks", hogy mi marad a fejlesztők kezelésére. Különösen, kísérti a legtöbb IE6 CSS programozóknak olyan határidővel, hogy megfeleljen. A jó hír az, a tapasztalat azt hozta fel újra együtt lehetséges javítások ezekre a kérdésekre (Gyakran nevezik a CSS Hacks ).
Ne feledje, hogy tartsa ezeket a hack / javítások praktikus
/ * Az alábbi zoom: 1 szabály kifejezetten az IE6 + IE7. * / * Html. Clearfix, *: First-child + html. Clearfix { zoom: 1; }
Tartsa finomítása CSS
Végre. Ha inspirálta, és kívánják-e használni egy vagy több CSS keretrendszerek, Heres gyors lista néhány népszerű is ....
Ne feledje, hogy a CSS keretrendszerek nem jelenti azt, hogy lusták, hogy hozzon létre egy saját ... Ez azt jelenti, hogy te okos tanulni másoktól tapasztalatok és hibák, Időt és a termelékenység növelésében!!
10 év CSS léte ebben az évben! Azok, akik már körül egy ideig, kiérdemelve a kenyerét (vagy nem) a CSS segítségével, akkor lehet, hogy tudja, milyen mi már éhes a jól kiválasztott betűtípusok. Még a hiányzó betűtípusok tervezők, mint amilyen a CSS Zen Garden éltek CSS háttérképeket betűtípusok helyett a törekvés csinál valami igazságszolgáltatás terveiket. Azt is próbáltam Flash / JavaScript ® csapkod, hogy elérjük a célokat. Semmi esetre ez egy rossz módszer a betűtípusok vágyunk a mi web design, de egyértelműen nem ez a leginkább kívánatos módon. és az évek során webdesigner, mint én, már teljes mértékben támaszkodott vagy tíz font a terveiket.
Újabb fejlemények a webes szabványokat, és font formátumok lehetővé teszik a szöveget HTML teszik betűtípusok más, mint a régi alapértelmezett betűtípusokat. Jön a "@ fontface" CSS decleration.
@ Fontface provids megoldást összekapcsolni az aktuális betűtípus fájlt, és keresse ki a webről. A @ fontface, tervezők betűtípusok használatával anélkül, hogy fagyassza be a szöveget a háttérképeket. A megvalósítás igen egyszerű, az alábbiak szerint, de mint minden jó dolog van CON részt hozzá, nem minden böngésző támogatja egy "betűtípus". Ha azt tervezi, hogy használni @ fontface a helyszínen igénylő kereszt böngésző támogatja, akkor meg kell, hogy a különböző forrásokból font-típusú ugyanaz.
A @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular"; src: url ('CalligraphyFLF.eot'); src: a helyi ('CalligraphyFLF "), helyi (" CalligraphyFLF "), url (' CalligraphyFLF.woff) formátumban (" woff "), url ('CalligraphyFLF.ttf) formátumban (" TrueType "), url (' CalligraphyFLF . svg # CalligraphyFLF) formátumban ("svg"); } @ Font-face { font-family: "A betűtípus"; src: url ("fonts / font_filename.eot"); src: helyi ("Alternatív név"), helyi ("Alternatename"), url ("fonts / font_filename.woff") formában ("woff"), url ("fonts / font_filename.otf") formában ("OpenType"), url ("fonts / font_filename.svg # font_filename") formában ("SVG"); } h2 {font-family: "A betűtípus", Georgia, serif;}
Mint látható a fenti példa, hogy tartalmazza a betűtípust választott betűtípus, az egyik linkelni egy sor fonttypes azonos betűtípussal. Ezért az emberek hivatkoznak rá, mint "Betű készlet".
Vannak font készletek rendelkezésre, amely kifejezetten lehetővé teszi, hogy összekapcsolja a CSS @ font-face ingatlan alatt végfelhasználói licencszerződés (EULA).
Hasznos WebFont források:
Az én korlátolt skill-set olyan eszközökkel, mint a Photoshop és Illustrator, Őszintén bevallom, hogy jobb vagyok, mint fejlesztő vagyok designer. De a háttér alapvető (szerver oldalon) fejlesztés Java / PHP / COBOL, már egy nagyon pozitív hatást gyakorol az én UI fejlesztési képességek. Úgy értem, hogy ezzel egyidejűleg létrehozza a terveimet, azaz amikor csinálok design, azt hiszem, arról, hogy a design a legjobban alakítani HTML-CSS és mindeközben a HTML-CSS, adok egy gondolat a technológia és a backend, hogy ésszerűen biztos A HTML könnyen építeni XSL hurkok vagy PHP kódrészlet, stb
Az évek, én dobták a fejét, hogy tervei szerint a UI designerek, akik valószínűleg donot van egy nyom, amit a HTML vagy CSS. Mindezek Évek óta arra gondoltam, hogy én túl sokat kér, Ha most várják a tervező, aki megpróbálja shov ő "lehetetlen kód" dizájn a torkomon, hogy megértsék, csak egy kicsit, mi a dizájnt kell átalakítani be. Hogy segítene ugye?
Aztán jöttem át ezt a hozzászólást ... ma webes tervezők, akik nem tudnak kódot ... Köszönöm Uram! Én csak egy a sok közül, aki úgy érzi, ugyanazt ... A fenti artitle egy kicsit hosszú kifulladt .. de megéri az olvasható, minden szavát.
Köszönöm Elliot Jay Készletek ... Én megkönnyebbültem!
Itt van néhány részleteket Elliots cikk .
Őszintén szólva, én vagyok döbbenve, hogy 2010-ben én még mindig jön át "webes tervezők, akik nem tudják kódolni a saját tervezésű. Nincs mentség.
Én ... meg voltam egy kicsit konkrétabb az én csipog. Beszéltem a tervezők, akik nem rendelkeznek még a legalapvetőbb HTML és CSS ismeretek fordulni lapos kialakításának egy aktuális oldalt. Nem az emberek, akik szándékosan nem akarnak kódot; azoknak, akik nem képesek. És én is, hogy azok csak a front-end ide a kódot, persze ez nevetséges azt gondolni, hogy a tervezők is lehet csodálatos back-end programozók ...
Kapunk "web" tervez elküldeni az Illustrator, 300dpi, lehetetlen kódot, nincs következetesség / használhatóság.
~ Amy Mahon
Késõre, és kaptam, hogy lezárja ezt valahogy. Tudom, hogy sokan lesznek, akik nem értenek egyet velem, és a célom nem az, hogy támadó vagy ideges, aki nem tud kódot, de remélem, hogy néhány, amit mondtam tükrözi egyes pontokat, hogy mindig jön ki, ha részletezném ezt a vitát.
Végén a nap, nem veszíti el aludni akik tudnak programozni, és akik nem. Én csak őszintén meglepődött, annyi, hogy a tervezők nem rendelkeznek a front-end készségek, mint én gondoltam, hogy ez volt a múlté.
Továbbá olvassa el a megjegyzést, volt kb 320 észrevételeiket, írok ... ők érdemes olvasni.
Kérjük, olvassa el a teljes post itt Elliots .. webes tervezők, akik nem tudják kódolni
Mivel a rádió gombot, és a szöveg nem inline, hogy a szöveg majd igazodnia az aljára a rádió gombot, az a szöveg jelenik meg valamivel a rádió gombot.
Ha azt akarjuk, hogy ezek igazítani a csúcsra, akkor meg kell helyezni a rádió és a szöveg külön konténerekben vagy nyúlik, mint a divs (adott esetben), és vigyázni fog az összehangolódás. Nem lenne egyszerűbb táblázatcellákhoz is, a design lehetővé teszi rövid.
Ez nem ugyanúgy néz ki minden böngészőben, ahogy minden böngésző jeleníti rádiók kicsit másképp, így mindig lesz méretű kérdések nem számít, mit teszel.
HTML5 még tervezetet. Ahogy ezt írom, munka HTML 5, amely 2004-ben kezdődött, még mindig adott alakra egy közös erőfeszítése a W3C HTML WG és a WHATWG . A szó, hogy a következő generációs HTML lesz új jellemzők és fejlesztések, amelyek új struktúrát és a szemantika, űrlap-vezérlőelemek, API-k, multimédia címkék stb.
Az egyszerű angol ... mit jelent számunkra UI fejlesztők ...
<body> <header> ... </ header> <nav> ... </ nav> <article> <section> ... </ Rész> </ Article> <aside> ... </ félre> <footer> ... </ lábléc> </ Body>
Helyett
<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>
például
<videó poster="poster.jpg"> <Forrás src = "video.3gp" type = "video/3gpp" media = "kézi"> <forrás src="video.mp4" type="video/mp4"> </ Video> <audio> <forrás src="music.oga" type="audio/ogg"> <forrás src="music.mp3" type="audio/mpeg"> </ Audio>
Sokkal több változás / frissítéseket az újabb verzió ... Lesz tartsuk frissítése ezen a poszton, ahogy jött Átfedés bármilyen érdekes is hasznos .... Nézd ezt a helyet
Ez a dokumentum nem ad pontos információt, mint a HTML 5 specifikáció még aktív fejlesztés alatt áll. Ha kétségeid vannak, mindig ellenőrizze a HTML 5 specifikáció itt .
Idő és újra, amikor minden más böngészőkben tekinthető viselkedni, mint mondta, a W3C szabályok, azaz spirál téged a fejlesztési szellemét dobtak egy hisztit, hogy úgy tűnik, nem egy fix. Csak egy ilyen ember van ebben a kérdésben az IE7.
Probléma nyilatkozat:
Én így is sok más súlyos web-fejlesztők, hogy észrevette több mint sok idő, hogy amikor egymásba ágyazott úszik az elrendezés, a fölé viszi néhány link (anchor tag), az azt tartalmazó tartályt úgy tűnik, hogy váltani néhány pixel a jobb . Megpróbáltam a Google megoldások ebben a kérdésben, de alig talált ésszerű válasz, hogy miért és mikor fordul elő (amely segíthet megakadályozni ezt a kérdést történik), így még soha nem találtam egyértelmű megoldást a problémára sem ...
Lehetséges megoldás:
Elfogyott a tapasztalat, én is megfigyeltem 90% százaléka az idők, azaz, hogy ez a kérdés hozzáadásával határozzák meg a zoom tulajdonság a CSS meghatározása rosszul viselkedő konténert ...
{# Somediv zoom: 1; }
Ismét az okok egyértelműek ... próbáld ki ezt ...
Egyes elemek IE-ben van egy "hasLayout" tulajdonság, ami "igazi" alapértelmezés szerint. Sok vizuális CSS viselkedést, például egy alfa szűrőt csak akkor működik, egy olyan elem, hasLayout. és a {Nagyítás: 1} Úgy tűnik, hogy a cél az elemek hasLayout tulajdonság .... Hasznos? Nem hiszem, szóval ...
A zoom tulajdonság is látszik, hogy támogatja a Chrome, de használatát látta úgy tűnik, hogy sok káros hatás az én elrendezés ... próbáld ki, Ha működik neked ... ha nem, könyvjelzőt ezt az oldalt a "CSS kockavetés"
