Kieku taqra dan f'xi blog ... ħsibt li kien sabiħ li katalogu din għall ref futur .... tista 'wkoll tkun kwistjoni intervista importanti li inti mitlub xi jum ....
Ikteb snippet ta 'CSS li se display paragrafu bil-blu fil-browsers anzjani, aħmar fil-browsers aktar ġodda, aħdar u iswed IE6 fil IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Kieku din il-kwistjoni stramba, fejn biċċa Javascript maħduma multa fl-l-ans browser IE bħala bar soltu 
Sempliċi ... kien, iżda peress li l-iskrittura ma kienx miktub minni, Hija ħadet filwaqt li debug dan "Għan ma jappoġġax din proprjetà jew il-metodu" żball li biss IE kien ittella '. Probabbilment! Jekk I kellhom jiktbu l-iskrittura, I ma ltqajna dan l-iżball fil-livelli kollha, kif ma jħalltux ismijiet varjabbli tiegħi mal-qasam IDs :).
Problema: L-għan ma jappoġġax din proprjetà jew il-metodu (fuq il-linja 3)
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Soluzzjoni:
L-iżball huwa ġġenerat fuq il-thirdrow fl-eżempju hawn fuq (Linja 3 ... "shortdesc = document.getE ...."). I ppruvaw kull tip ta 'affarijiet stupid, li I dont hija saħansitra jiswa l-aċċenn hawn u finalment raden dak! biss jinbidlu l-var shortdesc għal xi ħaġa oħra ħassar l-iżball. Bażikament! L-isem varjabbli kellu differenti mill-fieldID
Re-Ċikliżmu huwa Buzzword u In Web Development dan ifisser xejn differenti. Hija tikkonserva l-enerġija, f'termini ta 'sforz!
Matul is-snin tal-kitba CSS u l-ħolqien HTML minn disinji, I segwita prattiċi ftit aħjar, fl-insegwiment ta 'ffrankar ta' ħin u enerġija li dak li aħna komunement terminu bħala "Re-Invenzjoni-rota". Darba wara, I told myself, I li għandhom joħolqu mudelli ftit, xi standard jistgħu jerġgħu jintużaw CSS li nixtieq użu barra mill-kaxxa fil-ħidma futura tiegħi. Għalkemm mhux kompletament iżda I ma rnexxilhomx jikseb xi wħud mill-għanijiet.
Fl-avvanz, Re-Użu ta 'CSS, kelli ħarsa lejn l-oqfsa CSS ftit li huma komunement disponibbli lilna u ddeċieda li jqiegħdhom għall-użu, kif dawn huma ippruvati u ttestjati u maħluqa mill-iżviluppaturi b'esperjenza ħafna, minn myself. Aktar importanti minn "EVITAT ri-invenzjoni".
Għalkemm l-għarfien komuni għall-veterani, I ppruvaw pinna xi proġetti prinċipali kunċetti / aħjar l-prattiċi / ħsibijiet li marret lejn il-ħolqien dawn l-oqfsa, biex jagħmlu RE-ĊILKLIKU ta 'CSS possibbli. Nittama li dan se jgħin xi iżviluppaturi CSS li huma biss dwar u reċentement mbarkat-bandwagon CSS!
Użu Konvenzjonijiet Naming
Dan għandu jkun l-aktar fattur importanti fit-teħid-CSS / HTML jistgħu jerġgħu jintużaw. Tingħata ismijiet konsistenti ma 'elementi paġna jippermetti użu mill-ġdid ta' komponenti paġna u stili tagħhom bi ftit jew modifiki. F'konformità ma 'dan l-argument, Anki HTML5, f'bidla bidla kbira fuq predeċessuri tiegħu, huwa li jiġu introdotti xi viz tikketti strutturali. <article>, <section>, <header>, <aside>, u <nav> [ X'se HTML5 ġġib? ]. Anke ma HTML 4 (jew inqas), huwa aħjar biex insemmu sezzjonijiet standard ta 'paġna tiegħek consistanly bħal fl-eżempju hawn taħt sempliċi ...
Ftakar, paġni Ħafna dwar proġett tiegħek, jispiċċaw wara l-elementi ewlenin istess strutturali. Identifika dawn l-elementi komuni paġna ewlenin ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Irrisettja Stili Default (jreġġa CSS): Jekk inti tuża qafas jew tikteb tiegħek, għandek tipprovdi jreġġa CSS [ X'inhuma jreġġa CSS? ], peress li dawn inaqqsu jew jeliminaw xi kultant inkonsistenzi viżwali li jseħħu bejn browsers differenti. Fi kliem sempliċi il-Mekkaniżmu Irrisettja CSS tistabbilixxi l-istili ta 'Element HTML biex valuri żero jew nulli, b'mod li jissuperaw xi valuri awtomatiċi browser jistgħu joħloq. Dan jipprovdi rekord nadif li jiġu stabbiliti l-proprjetajiet ta 'dawn vojt elementi ta' kwalunkwe Defaults User-aġent [ Defaults Utent CSS2.1 aġent Sheet Style ]. L-oqfsa CSS ma jkollhom mekkaniżmu ta 'reset. Jekk qed tikteb int stess jreġġa CSS, kelma ta 'kawtela hija li jekk jiġri li tinsa għal reset-proprjetà ewlenin, Jista' jwassal biex jaqsmu l-browser kwistjonijiet, li huma diffiċli ħafna biex debug. Ftakar, Żomm kopja ta 'l-istili reset u qatra minnhom f'kull proġett ġdid inti toħloq.
ġisem, div, dl, dt, dd, UL, ol, LI, H1, H2, H3, H4, H5, H6, qabel, il-forma, fieldset, input, tagħżel, textarea, p, blockquote, tabella, th, td { fruntiera: 0px; marġni: 0; ikkuttunar: 0; }
Defaults Irranġa (stili linja bażi) sa Elementi:
Wara li tkun stabbilita (għal żero jew null) l-valuri default ta 'ċerti attributi ta' Elementi HTML ċerti Huwa meħtieġ li tapplika xi stili madwar kull każ ta 'dawn l-elementi. Dawn default jista 'jvarja bħala per-disinn jew skond l-aħjar prattiki inti ssegwi.
Oqfsa Ħafna CSS, dejjem tintroduċi xi nuqqasijiet ġodda, flimkien ma 'resetting stili browser default.
Dawn nuqqasijiet li vojt ta 'l-Defaults User-aġent (imqaxxar mill-bogħod mill-Irrisettja CSS), dawn ser ikunu konsistenti madwar browsers.
Ftakar, stili linja bażi jintużaw sabiex jitfasslu stili li ser jintużaw disinn kollha. eż.
html {font-daqs: 77%; font-familja: Arial, sans Serif-;} qawwija, H1, H2, H3, H4, H5, H6 {font-piż: bold;}
Stili Abstract għall Komponenti HTML Komuni u tal-Kategoriji Komuni:
Aktar proġett jikkonsisti bosta paġni se jkollhom elementi HTML komuni użati madwar is-sit, għall eż Xi tip ta 'forom, twissijiet u żbalji, popups Custom, lightboxes eċċ Peress dawk il-komponenti huma użati mill-ġdid fost il-proġetti, Se jkun utili li jiġi provvdut sett ta 'klassijiet assoċjati ma' stili predefiniti għall dawn il-komponenti u inti tista 'tiffranka yourself ħafna ħin.
Barra minn definizzjoni definizzjonijiet li jistgħu jerġgħu jintużaw stili għall-Komponenti HTML komuni, nistgħu klassijiet astratti stili li jappartjenu għal, tipografija kulur jew saħansitra tqassim. I myself tendenza li tuża ... klassijiet komuni bħal Clearfix, Font08, FontGrey, AlignL, DisplayB eċċ
kontribut forma {fruntiera: 0px; isfond: # ffffff; ikkuttunar: 0px 10px; _padding: 0px 0px; għoli: 26px; kulur: # 000000; linja tal-għoli: 30px; font-daqs: 1.1em;} forma textarea {fruntiera: 0px; isfond: # ffffff; kulur: # 000000; font-daqs: .9 Membru; linja tal-għoli: 1.5em; overflow: viżibbli;} . Fbold {font-piż: bold; kulur: # cccccc;} . Fgrey {kulur: # 666666;} . Flightgrey {kulur: # bbbbbb;} . Clearfix {ċar: it-tnejn;} . Diviżur {fruntiera ta 'fuq: 1px solida # 647B06; fruntiera tal-qiegħ: 1px solidu # 9CC00A; għoli: 0px;} . Displayb {display: block;}. Displayn {display: xejn;} . Alignr {test tallinja: id-dritt}. Alignc {test tallinja: ċentru} . Floatr {float: id-dritt;}. Floatl {float: xellug;}
Jiffissa għall quirks browser komuni
Browsers differenti jimplimentaw kodiċi CSS u jipprovdu livell differenti ta 'appoġġ għall-ispeċifikazzjonijiet CSS. Ir-riżultat ta 'dan .... "Quirks Browser", li aħna-iżviluppaturi jitħallew sabiex tindirizza. Speċjalment, IE6 haunts kodifikaturi aktar CSS ma 'terminu perentorju biex jintlaħqu. L-aħbar tajba hija esperjenza miġjuba flimkien jiffissa jintużaw mill-ġdid possibbli biex dawn il-kwistjonijiet (Spiss msejħa bħala Hacks CSS ).
Ftakar, Żomm dawn hacks / jiffissa handy
/ * Il-zoom ġej: 1 regola hija speċifikament għall IE6 + IE7. * / * Html. Clearfix, *:. L-ewwel wild + html clearfix { zoom: 1; }
Żomm Raffinar CSS tiegħek
Fl-aħħarnett. Jekk inti huma ispirati u l-intenzjoni li juża waħda jew aktar mill-oqfsa CSS, Heres hija lista ta 'malajr ta' ftit dawk popolari ftit ....
Ftakar, bl-użu oqfsa CSS ma jimplikax li inti għażżien biex joħolqu waħda tal tiegħek ... Dan ifisser li inti intelliġenti li jitgħallmu minn xulxin esperjenza u żbalji, jiffranka ħin u tiżdied il-produttività!!
CSS kompletati 10 snin eżistenza din is-sena! Dawk li ġew madwar għal xi ftit, jaqla ħobż tagħhom (jew le) bl-użu CSS, allura inti tista 'taf kif ilna starving għal għażla tajba ta' fonts. Anki man-nuqqas ta 'fonts disinjaturi bħal dawk fil CSS Garden Zen għamlu użu ta 'stampi isfond CSS biex jissostitwixxu fonts fl-insegwiment ta' kif isir xi ġustizzja disinni tagħhom. Għandna wkoll ippruvaw Flash / JavaScript hacks ® biex jintlaħqu l-miri tad-disinn tagħna. Bl-ebda mod dan huwa mod żbaljat biex jiksbu l-fonts aħna xewqa fis-disinji web tagħna, iżda ċert, mhuwiex l-aktar mod mixtieq. u aktar web designer snin, bħali, kompletament invokati għaxar jew hekk fonts għad-disinji tagħhom.
Żviluppi riċenti fl-istandards tal-web u formati font jagħmluha possibbli li l-test HTML tipa oħra għajr il-fonts istess default qodma. Jasal fil-"@ fontface" decleration CSS.
@ Fontface provids soluzzjoni biex tagħmel link mas-font fajl attwali u jerġgħu jieħdu lura mill-web. Bl-użu @ fontface, disinjaturi jistgħu jużaw fonts mingħajr ma jkollhom friża-test kif immaġini isfond. L-implimentazzjoni hija ferm ħafif, kif muri hawn taħt iżda bħala l-affarijiet tajba jkollhom parti CON lilha, mhux kollha browsers appoġġ għal wieħed "font tip". Jekk inti qed tippjana li tuża fontface @ fis-sit ma jeħtieġu l-appoġġ browser transkonfinali, allura inti se jkollhom jipprovdu sorsi għal diversi font-tipi ta 'l-istess.
Bl-użu @ fontface
@ Font-wiċċ { font-familja: "CalligraphyFLFRegular"; src: url ("CalligraphyFLF.eot"); src: lokali ("CalligraphyFLF"), lokali ("CalligraphyFLF"), il-format url ("CalligraphyFLF.woff") ("woff"), url ("CalligraphyFLF.ttf") il-format ("TrueType"), url ("CalligraphyFLF . SVG # CalligraphyFLF ") il-format (" SVG "); } @ Font-wiċċ { font-familja: "tipa" Your; src: url ("fonts / font_filename.eot"); src: lokali ("isem alternattiv"), lokali ("Alternatename"), ("fonts / font_filename.woff") url format ("woff"), ("fonts / font_filename.otf") url format ("opentype"), ("fonts / font_filename.svg # font_filename") url format ("SVG"); } h2 {font-familja: "tipa" Your, il-Ġorġja, Serif;}
Kif tistgħu taraw mill-eżempju hawn fuq, biex tinkludi l-tipa font magħżul, wieħed għandu link għal sett ta 'fonttypes għall-istess tipa. Għalhekk in-nies jirreferu għaliha bħala "Kitt Font".
Hemm Kitts Font disponibbli li espliċitament jippermetti li tgħaqqad ma 'CSS @ font-wiċċ proprjetà lilha taħt il-Ftehim Tmiem License Utenti (EULA).
Riżorsi utli WebFont:
Bil limitat tiegħi ħila-sett ma 'strumenti bħal Photoshop u illustratur, nista' onestament nistqarr li jien iżviluppatur aħjar minn I am a disinjatur. Iżda l-isfond tiegħi bil-qalba (server sekondarji) l-iżvilupp ma Java / PHP / COBOL, kien influwenza pożittiva ħafna fuq il-ħiliet tiegħi żvilupp UI. What I medja hija, filwaqt li toħloq disinji tiegħi, jiġifieri kull meta nagħmel disinn, naħseb dwar kif id-disinn jista 'jkun aħjar kkonvertit HTML u CSS filwaqt li tagħmel l-HTML-CSS, I jagħti riflessjoni dwar it-teknoloġija backend u jagħmlu raġonevolment ċert li l-HTML tista 'tiġi faċilment implimentati fil XSL linji jew siltiet PHP eċċ
Matul is-snin, I ġew jintefa ras fuq disinji minn disinjaturi UI li probabbilment donot clue dak HTML jew CSS huwa. Dawn is-snin I ġew ħsieb li nixtieq titlob għall wisq, Jekk I biss jistennew li l-disinjatur, li qed tipprova Shov "impossibbli li kodiċi" tiegħu disinn fl-gerżuma tiegħi, li wieħed jifhem biss ftit liema disinn tiegħu tkun konvertita fis. LI jgħin id-dritt?
Imbagħad, I sab din il-kariga illum ... disinjaturi Web li ma jistgħux kodiċi ... Grazzi Mulej! Jien biss wieħed minn ħafna li jħossu l-istess ... Il-artitle hawn fuq huwa daqsxejn twil xejn b'xejn .. iżda jiswa l-jaqra, kull kelma ta 'dan.
Grazzi Elliot Ħażniet Jay ... I jħossu meħlus!
Hawn xi siltiet mill elliots artikolu .
Onestament, jien ixxukkjat li fl-2010 jien xorta ġejjin madwar "web disinjaturi 'li ma jistgħux kodiċi disinji tagħhom stess. Ebda skuża.
... I għandha ħadthom kien ftit aktar speċifiku fil tweet tiegħi. I kien jitkellem dwar disinjaturi li ma jkollhomx anki l-HTML aktar bażika u ħiliet CSS li jduru disinn fissa fis-sit attwali. Mhux in-nies li intenzjonalment jagħżlu li ma kodiċi; dawk li ma jistgħux. U jien ukoll jirreferu biss għall front-end kodiċi hawn; ta 'kors huwa redikoli biex jaħsbu li disinjaturi għandhom ukoll ikunu aqwa back-end programmaturi ...
Nikbru "web" disinji mibgħuta Illustrator, 300dpi, impossibbli għall-kodiċi, l-ebda konsistenza / użabilità.
~ Amy Mahon
Huwa jkollna tard, u stajt ltqajna biex nagħlaq dan up b'xi. Naf se jkun hemm ħafna li ma jaqblux miegħi, u l-intenzjoni tiegħi huwa li ma joffendu jew taqlib ħadd li ma jistgħux kodiċi, imma nispera li xi wħud dak li stajt qal tirrifletti xi punti li dejjem toħroġ delving fis meta dan id-dibattitu.
Fl-aħħar tal-ġurnata, jien ma jitlef l-ebda irqad fuq li jistgħu kodiċi u li ma jistgħux. Jien biss verament sorpriż li ssib disinjaturi tant li n-nuqqas front-end ħiliet, kif ħsibt li dan kien xi ħaġa tal-passat.
Aqra wkoll il-kummenti, kien hemm madwar 320 kumment, kif i jiktbu ... huma jiswew jinqara.
Jekk jogħġbok aqra elliots post sħiħa hawn .. Web disinjaturi li ma jistgħux kodiċi
Peress li l-buttuna tar-radju u t-test huma inline, sabiex it-test se tallinja ruħha mal-qiegħ tal-buttuna tar-radju, It-test il-se jidhru li huma kemmxejn taħt il-buttuna tar-radju.
Jekk inti tixtieq dawn li jallinjaw mas-quċċata, inti ser ikollok post-radju u t-test fil-kontenituri separati bħal divs jew tifrex (kif xieraq) u dawn se jieħdu ħsieb tat-allinjament. Ikun aktar faċli biex użu ta 'ċelloli tal-mejda wisq, ta' qosor disinn tiegħek tippermetti dan.
Dan mhux se tħares l-istess f'kull browser, kif kull browser displays radjijiet kemmxejn differenti, u għalhekk hemm huwa dejjem se jkunu kwistjonijiet daqs x'ikun inti tagħmel.
HTML5 għadu abbozz. Kif jikteb, Ix-xogħol fuq HTML 5, li bdiet fl-2004, għadu qed jingħata forma minn sforz konġunt bejn il- WG HTML W3C u l- WHATWG . Il-kelma hija li l-HTML gen li jmiss se jkollhom titjib u l-karatteristiċi, li kieku struttura ġdida u semantika, kontrolli forma, APIs, multimedja tags eċċ.
Bl-Ingliż sempliċi ... dak li jfisser li l-iżviluppaturi UI us ...
<body> <header> ... </ header> <nav> ... </ nav> <article> <section> ... </ Sezzjoni> </ Artikolu> <aside> ... </ aside> <footer> ... </ footer> </ Korp>
Minflok
<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> </ Korp>
eż.
<video poster="poster.jpg"> <Sors src = "video.3gp" type = "video/3gpp" midja = "jinżammu fl-idejn"> <source src="video.mp4" type="video/mp4"> </ Vidjo> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </ Awdjo>
Hemm ħafna bidliet aktar / promozzjonijiet għall-verżjoni l-ġdida ... Se żżomm aġġornament din il-kariga bħala nasal madwar in kwalunkwe dawk utli interessanti .... Watch dan l-ispazju
Dan id-dokument ma jistgħux jipprovdu informazzjoni preċiża bħala l-HTML 5 ispeċifikazzjoni għadha attiv fl-iżvilupp. Meta fid-dubju, dejjem jivverifika l- HTML 5 ispeċifikazzjoni hawn .
Ħin u aktar mill-ġdid, Meta l-browsers oħra jidhru li jaġixxu kif qallek mir-regoli W3C, spirali IE inti out ta 'l-ispirtu iżvilupp billi jitfg tantrum, li ma jidhirx li għandhom jiffissaw. Biss tali wieħed huwa din il-kwistjoni IE7.
Dikjarazzjoni Problema:
I u għalhekk jista 'ħafna mill-iżviluppaturi web oħra serji nnotajt aktar minn kemm il-darba, li l meta jkun hemm nested sufruni fit-tqassim, fuq imbagħad jerġgħu fuq xi links (tags ankra), il-kontenitur li jkun fih jidher li ċċaqlaq pixels ftit lejn il-lemin . I ppruvaw soluzzjonijiet google għal din il-kwistjoni, iżda kważi ma sabet l-ebda tweġiba raġonevoli li għaliex u meta dan iseħħ (li jistgħu jgħinu biex jevitaw din il-kwistjoni mill jiġri), b'hekk jien qatt ma sabu soluzzjoni ċara għall-problema jew ...
Possibbli Soluzzjoni:
Minn esperjenza, għandi fil-mija avviż 90% tal-ie drabi, li din il-kwistjoni huwa ffissat billi jiżdied proprjetà zoom fid-definizzjoni CSS tal-kontenitur ħażin iġib ruħu ...
# {Somediv zoom: 1; }
mill-ġdid ir-raġunijiet huma ambigwi ... jippruvaw dan ...
Xi elementi fl-IE għandhom "hasLayout" proprjetà, li huwa "vera" fil-kontumaċja. Ħafna imgieba viżwali CSS, per eżempju, 1 filtru alfa biss xogħlijiet fuq element li hasLayout. u l-{Zoom: 1} tidher li tagħti l-elementi fil-mira l-proprjetà hasLayout .... Utli? I dont think so ...
Il-proprjetà zoom huwa wkoll jidher li appoġġjat mill Chrome, iżda bis-saħħa l-użu tiegħu jidher li jagħmlu effett negattiv ħafna fuq it-tqassim tiegħi ... jippruvaw dan, Jekk din taħdem għalik ... jekk ma jiġrix dan, Immarka din il-paġna taħt 'Craps CSS "
Ilbieraħ, wara l-ħruġ I jiltaqgħu ma 'l-jreġġa CSS fil-Google Chrome ... ħsibt ta' tħaffir daqsxejn aktar profonda fil-qasam tal Sheets Utenti Style aġent ...
Misjuba din it-tabella fuq valuri awtomatiċi ta 'CSS2.1 Sheets Utent Style aġent ... (għal dawk konxji ta' liema "Folji User Style aġent" hu li ssegwi X'inhu Folji User aġent Style (speċifikazzjoni) .
Għal-lista kompleta ta 'CSS nuqqasijiet Utent 2.1 aġent Folji Style ikklikkja hawn
