IT kifejezése

Tegnap, mint minden más "Ground Hog Day", dolgoztam néhány CSS / tableless layout. Minden rendben halad az IE 7, FF 3 és Chrome, addig amíg egyszer csak láttam, néhány ENSZ-különbözetet elhanyagolható látott csak a Google Chrome. Bár nagyon furcsa és worring, volt néhány új bug / kérdés, hogy én jött Átfedés volt végre némi fűszer az én hétköznapi munkában. Szomorú (de szép) érte el rögzíteni néhány percen belül a szonda ...

Alapvetően, úgy nézett ki, mint a Google Chrome figyelmen kívül hagyja az én CSS visszaállítása (margin: 0px). Tulajdonképpen ez okozta a böngésző stíluslap (-webkit-padding-start: 40px). Tehát a megoldás az volt, hogy állítsa vissza ezt a stílust azáltal padding: 0 működött az elemeket.
Egy jó módja annak, hogy a probléma ne történik minden eleme egy globális CSS Pihenés az alábbiak szerint

* {Margin: 0; padding: 0;}

Mi a User Agent Style Sheets (Specification)?
A következő kivonat kell venni http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , nyomon linket tovább a User Agent Style Sheets

CSS 1 bevezeti ezt az ötletet, amely szerint minden egyes User Agent (UA, gyakran a "böngésző" vagy "web kliens") lesz az alapértelmezett stíluslap, amely bemutatja a dokumentumok ésszerű - de vitathatatlanul földhözragadt - formában. CSS 2 azt mondja, hogy megfelelnek a böngészőknek kell alkalmazni egy alapértelmezett stíluslap (vagy viselkednek, mintha ők), és hogy az ágens alapértelmezett stíluslap kell mutatnia az elemek a dokumentum nyelve oly módon, hogy eleget általános bemutatása elvárásokat a dokumentum nyelvét; CSS 3 valószínűleg ugyanazon elme.

Mivel a CSS specifikációk rá kellene bízni megvalósítások hogy használ-e "valódi" stíluslap alapértelmezett kijelző vagy nem, ez nem meglepő, hogy nem talál egy alapértelmezett stíluslap minden böngésző telepítési mappát. Ellentétben a Microsoft Internet Explorer, valamint az Opera, például (és amennyire én tudom), Gecko böngészők, mint a Firefox és a Netscape Navigator (keres "html.css"), hanem Konqueror teszi meglehetősen egyszerű megérteni az alapértelmezett stílus.

Ez is régi iskola, de mint rendesen, ez az én memória kiegészítés ...
Szóval le van tiltva = "true" és a fogyatékkal élő = "false" ugyanaz? Igen
... Nem hiszem, jól! Amit így van ... itt van néhány gyors magyarázat ...
"Letiltva" egy attribútum bármilyen formájú elem / területen, és így el tudja fogadni bármilyen értéket természeténél fogva.

Amíg ez az attribútum jelen van, az elem le lesz tiltva, függetlenül annak értékétől. pl.
<input type="text" value="This van disabled" disabled>
<input type="text" value="This van disabled" disabled="disabled">
<input type="text" value="This van disabled" disabled="true">
<input type="text" value="This van disabled" disabled="false">

A fenti teszi az ebben a formában a területen "letiltva".

Egyszerűen nem nyújtja az attribútum "Disabled" tartja a mező "tiltható" ... mint az alábbi

<input type="text" value="This nem disabled" />

Ne feledje "Minden érték (vagy értékkel egyáltalán nem rendelkeznek) a fogyatékos attribútumot, a böngésző lehetővé teszi majd, hogy tiltva". Annak érdekében, hogy minden egyértelmű a fejekben W3C javasolja, hogy az általunk használt tiltott = "fogyatékos" ezekben a helyzetekben.

Ez a különbség azonban, ha használjuk ezt az attribútumot a javascript ...

document.form.element.disabled = true; / / az elem le lesz tiltva
document.form.element.disabled = false; / / az elem engedélyezve lesz

A fenti érvek is igaz, ezen attribútumok és elemek száma:

• ellenőrzött (rádió gomb és checkbox)
• kiválasztva (opció)
• nowrap (td)

A Google elindítja a mozgást gyors emberek kiírási IE6 ... A lehallgatás IE6 felhasználók egy popup oldalon terhelés ... lehet, nem túl jó ötlet ... de hogy egy UI fejlesztő, van, hogy csatlakozzanak ehhez Band Wagon ... eggyel kevesebb böngésző aggódjon Bocs ... ez önző! de én ezt a javascript ... (TRY ez az oldal IE6) ...
Hé! és a fényesebb jegyzet ... Nézze meg a kijelzőn a POWER JavaScript .... ez is lehoz egy óriás (vagy ha volt)

Szóval ... Segítség a világot megszabadítsuk IE6 egy sorban a javascript!

http://code.google.com/p/sevenup/

Egy másik böngészőt, hogy vigyázzon a holnap! (IE8 jön ki a Beta állam holnap) ... Az igazán jó idő van megadva IE6 hosszú Mercy halála miatt ... Egyesült állunk bukása IE6

"IE6 az új Netscape 4. A hack alátámasztásához szükséges IE6 egyre inkább tekintik felesleges áru. Mint a Netscape 2000-ben 4, IE6 érzékelték, hogy visszafogja az interneten. "

Jeff Zeldman, szabványok guru

És közben azok számára, akik hozzám hasonlóan elárasztják a hívások a törés CSS elrendezést IE8, itt van a régi körüli munka / kijavítani a meta tagek (meta http-equiv = "X-UA-Compatible"), ki lehet próbálni ...

Mis-viselkednek IE8: CSS Layout törések (célzás a böngésző verziót használod a Meta Tags IE8)

Eretnekségek másik kis peice a Javascript trükk, hogy meg kellett ásni körül, mert a helyzet commaned azt. Az egyik internetes oldalak, nem volt ez a helyzet, amikor kellett végrehajtani "windows.onload" kétszer. Az első dolog, ami jött, hogy egy tapasztalatlan szem előtt, mint az enyém (Azt kell mondani őszintén, hogy mivel én már a javascript keretrendszerek és könyvtárak, én forgotton, hogy nem egyszerű dolgokat a saját ... Szomorú, de igaz), a következő módszer ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 stb ..

Sajnálom mondani, de ez nem megy ... nem akarunk, hogy megvitassák a végrehajtási tudománya Javascript sokat ... de az én közelmúlt tapasztalatai, csak az utolsó funkció (onloadfn3) rosszul lesz ténylegesen kerül végrehajtásra.

Normális helyzetben, ellentétben az enyém (ami fogok beszélni egy kicsit később) ... akkor tegye a következőket végrehajtani mutliple onload funkciót ....

Vagy valami ehhez hasonló

 doOnLoad funkció () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Az én jelenlegi helyzet, nem tudom használni sem a fenti ...
Miért kell hívnia windows.onload kétszer, hanem hogy felhívja a két funkció egyetlen onload funkciót? Itt gyors pillantást az én problémám ... nyilatkozat

"Saját hely oldalak struktúrája, mint a WordPress téma .... vagyis van közös footer.php header.php, és hogy lesz bekerült a oldalaihoz. Van egy onload funkciót végrehajtani azokat a footer.php csinálni néhány közös funkciók onload. És van néhány oldalon, hogy kell valamit a saját onload, kivéve azokat a feladatokat a közös onload funkciót. Ha hozzá callback függvényt közvetlenül a felvezető window.onload, akkor felülírjak korábban rendelt callback a footer.php "

.... Az én problémám megértette ?

Nos! van néhány megoldás, hogy tudtam megtalálni. Mindannyian nagyon hasonlóak, és főleg implementions egy adott megoldást Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Megoldás:

Egyszerűen adja hozzá ezt a javascript kódot az oldal ...

 else { window.onload = function() { if (oldonload) { oldonload() } func() } } } addLoadEvent funkció (funkció) {var oldonload window.onload = if (typeof window.onload! = 'funkciójú') {window.onload func =} else {window.onload = function () {if (oldonload) {oldonload () } func ();}}} 

És hívj, ahelyett, hogy a szokásos "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Több kódot futtatni az oldal betöltésénél *
 }); 

Előnye ennek a kódrészletet ...
1. Elsősorban Ez lehetővé teszi több windows.onload események hívott különálló részei a kódot anélkül, hogy a korábbi definíció overridding
2. Ez igazán feltűnő. Meg lehet helyezni egy fájlt a másik script, vagy egy külön fájlban.
3. Úgy működik, még akkor is, ha window.onload már be van állítva.

Egy másik gyors Tut. Itt van valami egyszerű és szép erejét kihasználva a CSS ... de nehéz volt concieve (és biztosan nem én voltam), hogy kezdődik. Hozzáadása Dropshadow lehet az peice sütemény sokunk számára, segítségével néhány képszerkesztő eszközök, mint a Photoshop ANF tűzijáték stb
Az ok, hogy miért, azt választotta vetett árnyékot, hogy a CSS segítségével, általában az oldal létrehozása közben design / html kérelem, a követelmények folyamatosan iterációt. Úgy értem, egy meglévő webhelyet a sok kép, mint azok, freinds megjelenítő listában vagy egy képgaléria, nehéz lesz újra feldolgozni, hogy az egész rakományt a képek, hogy már már betárolt hozzáadni vagy eltávolítani az árnyékokat, hogy a számít.
Tehát ha volna egy kis előre gondolkodás megteremtése mellett HTMLS hozzá az extra osztályok, illetve általában a helyzet, hogy van egy logikai hurok generáló ezek az ikonok / bélyegképek XSL, PHP. JAVA vagy bármilyen más programozási / script nyelv, akkor add meg bármikor, akkor csak az ügy koncepciós és elrejtik ezeket az árnyakat a CSS Display tulajdonság, mint egy az ügyfelek folyamatosan változó követelményeknek ... Én havn't tenni ezt a fajta előre gondolkodó mielőtt ez ... de ahev el most!

Az alábbi példában az eredeti kép árnyék ingyenes, és az dropshadows érvényesek, mint szükséges! Azt is volna egy kis extra, segítségével a trükköket az én korábbi Tut (Well! ezek valószínűleg a legrövidebb különféle oktatóanyagok, így csak akkor indokolt, hívja őket "Tut" 's) mintegy CSS Clip ingatlan esetében csak mutogatni

Eredeti kép

CSS DropShadow Eredmények

Demo megtekintése | Letöltés sourcefiles

Miért akarom érteni ezt?? Humm ...!!

A legtöbb CSS írók egyetértenek abban, hogy a CSS Clip tulajdonság talán az egyik legtöbbet használt un CSS tulajdonságok. Ez annyira igaz, nekem is volt a legboldogabb, hogy elhanyagolja azt, amíg elkezdtem módosításával MooTools két gomb (Pin) Csúszik Component (a tartomány indikátor) .

Volt egy jó javaslat az egyik komponens felhasználóknak, hogy módosítsák a csúszka komponens segítségével kivágott képek hátteréül (szemben egy változó szélességű Division), hogy jelezze a csúszkát tartományban. Így eljött az időm, hogy belépjen a móka, de az ENSZ-Chartered (számomra persze), víz a CSS Clip ingatlan.

Nos! milyen nehéz lehet? Nem sok minden ... Igen és nem. A szintaxis a CSS Clip ingatlan szép, de egyenesen a szó / usuage egy kicsit croocked. A memória, mint az enyém, mindig, ülök átdolgozni én Slider Script ... Van tokeep hivatkozva vissza használják ezt a CLIP tulajdonság, hogy emlékeztessem magam a logikát, hogy én hoztam létre az én script .... Ezért! gondolják, hogy tolltartó le, azzal a reménnyel, hogy emlékezzen, hogy a jövő (és számára is, akik úgy tűnik, visszarettent a CSS Clip Property)

Mit jelent a CSS Clip csinálni?

Clip része a vizuális effektek modulja CSS 2.1. Egyszerűen fogalmazva, a feladata, hogy tegyen egy ablak tetején látható egy tárgy, amelynek a nyírni, így nyírás képek és bélyegképek létrehozása anélkül, hogy további fájlokat (már be ezt a funkciót, hogy jobban használják a csúszka komponens )

A Clip CSS tulajdonságot, akkor létrehozhat egy clipping segítségével rect alakja. Mint sok más CSS tulajdonságok (mint margin, padding, stb), a len szükséges koordinátákat 4 Top, Right, Bottom, Left (TRBL). A croocked természetét tükrözi ezt a tulajdonságot, ha közelebbről szemügyre, hogyan számítja ki a klip vágási régió segítségével a négy koordináta (az agy küld egy lök egy ideig). Most, hogy megzavarja azt az alsó felülről indul, és a jobb kezdődik balra. . Látod, mit mondtam? .... Ezért ezt a hozzászólást ...

Ez a kis zűrzavar könnyen eltűnik, ezzel a vizuális magyarázat CSS Clip / rect ingatlan alatt!!

CSS Clip követelmények

A feladat kezdtük, hogy a következő klip Thumbnail image egy szögletesebb látszó képet (és egy nagylátószögű kép)

Eredeti Thumbnal / kép	Clip követelmények Sqaure Thumbmail

CSS Clip Eredmények

Demo megtekintése | Letöltés sourcefiles

Néha tartani a pageweight le ... már szét a szkriptek darabokra ... Ezek a javascript töredékek is betöltésre kerül, és szükség esetén (egy eseményről, vagy kattintson a hivatkozásra vagy gombra stb.)

JavaScriptek betöltése dinamikusan egyszerű és szép egyenes továbbít az alábbiak szerint ...

= “text/javascript” > <Script type = "text / javascript">
loadNewScript funkció (forrás) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ("src", forrás);
document.body.appendChild (ek);
}
</ Script>

és akkor az alábbi linkre hívás bárhol a szervezetben, vagy tudod, hogy ez a szkript "onLoad" az maga a dokumentum ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript (" myDynamicScript.js '); "> Load dinamikus Script </ a>

vagy

<body onload="loadNewScript('myDynamicScript.js');">

Ha css személy, akkor tudni fogja a fájdalmat abban, hogy a kereszt elrendezésben dolgozik böngészővel. IE8 még egy kulcs a fejlesztők nekünk dolgozik. Anywaz! ha bejön ez a kérdés fel, mint én tegnap, ahol a tökéletesen működő CSS IE7 (és korábbi) és a Firefox is hirtelen elkezdett dobott hisztizés IE8, próbáld ki ezt ... Úgy tűnt, szépen leviszi a problémákat a pillanatban ....

A Meta nyilatkozatot, tudjuk meg a renderelő motort szeretnénk IE8 használni. Tehát kényszeríteni IE8 mint IE7 teheti be a következő ... metataget vezetője a dokumentum: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Alapértelmezésben IE Meta lenne: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
amely tenné IE8 teszi az oldalt az új szabványok mód.

Ha szükséges, ez a forma lehetne használni elszállásolásáról, más böngésző használata az alábbiak szerint:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Részletes DOCTYPES:

HA Ön még nem ismeri a fajta állat úgynevezett "doctype" ... itt van néhány gyors olvasási
Mik DOCTYPES? Milyen furcsa szokásai és a böngészõ szigorú mód?
DOCTYPE beállítása XSL

Egy alaposabb ismeretek DOCTYPES, keresse ezeket a linkeket ...
A List Apart: Csináld meg a helyét a jobb DOCTYPE!
A List Apart: Beyond DOCTYPE: Webes szabványok, előre kompatibilitás, és az IE8

Megjegyzés: bár sokan HTML / CSS emberek már elhanyagolja a fontosságát DOCTYPE decleration a mi dokumentumokban, A megfelelő DOCTYPE, általában a válasz, hogy a legtöbb böngésző több kérdés.

A különböző Körhinta odakinn, sokan Mootools is, még mindig úgy döntött, hogy írjak saját Körhinta osztály, néhány jó ok
1. Keresünk egy lapozó funkció (ahhoz, hogy ugrani egy adott dia / lépés a körhinta).
2. Keresett szabadságot elhelyezése a bal és jobb gombok / linkek, ha valaha kedvem.
3. Jobban kézben tarthatják a Slide lépések.

Én nem sikerült létrehozni egy új Körhinta, a fenti jellemzők az alábbiak szerint ... ... Nyugodtan javasol módosításokat akkor lenne szükség!

Saját példa így néz ki ... [ Bemutató megtekintése ]

Demo megtekintése | Letöltés Mootools Carousel A személyhívó 1.0 (Letöltve 1998 alkalommal)

1. Körhinta Lapozás

Könnyedén hozzá a lapozás a körhinta, egyszerűen csak beállítja a személyhívó zászló, ami elmúlt parater telt megteremtése mellett például a MooCarousel az igaz (akar lapozó) vagy hamisak (donot akar lapozó).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, true); / / ns = számú diák, sss = dia lépés nagyság

És persze meg lehet változtatni a kinézetét-n érzem, ezeknek a személyhívó achors kedve szerint módosítja a CSS-t.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging. Áram. Carousel_paging. Oldal {vázlata: none; szélesség: 15px; magasság: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover. Carousel_paging. Aktuális {background: # 4D4D9B; color: # ffffff;}

Nos! van egy kis probléma azonban a horgonyok személyhívó ha be van állítva, akkor mindig lesz keletkezett után Carousel komponens. Azt akartam, hogy ez a dinamikus is, de aztán csak tartani a szkript elfújta az arányok, úgy döntöttem, hogy kihagyom.
De tudod, egy kis JavaScript, akkor könnyedén módosíthatja a lapozás generáció kódot a MooCarousel osztály kérjük az Ön igényeinek.

2. Testreszabása a Bal és Jobb Ikonok

Meg lehet változtatni az elhelyezést, képek vagy bárminemű displat tulajdonában bal és jobb gombok egyszerűen csak a játék körül a CSS-t. , hogy képes legyen megváltoztatni a kihelyezések a bal és jobb buttoms volt a tényleges oka, hogy számomra mi az én jobb Carousel osztály.
Mivel ez MooCarousel osztály, elfogadja az id van ilyen gomb, akkor valójában ezek a gombok helyet bárhol az oldalon, ha úgy tetszik ... nem kell lennie az elem hierarchiában, mint a példámat.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, true);

CSS
. Carousel_container_l. Carousel_container_r {margin: 50px 0 0 0; helyzet: relatív, szélesség: 23px; magasság: 20px; float: left; kurzor: pointer;}

. Carousel_container_r {background-position: 38px 0;}

. Carousel_container_l {background-position: 58px 0;}

3. Testreszabása Slide lépések

Mit értek MY testreszabása SLIDE lépések?
A legtöbb Körhinta tolja tele az a látható ablak. Tehát meg kellett mondani a négy elem (mint a fenti példában), akkor csúszik mind a négy elem. Ezzel a Carousel komponens, miután elhaladt a diák számát és méretét a lépés, amelyet választott.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, true);
c_ns = számú diák, c_sss = dia lépés nagyság

Továbbá, az én vagyok example1 calcuted lépést a dia méretét, a logikán alapul, ahol tudom, hogy a tárgyak számát, szélesség minden egyes darabjáról és a margók számára, amelyek után az egyes elemeket az én CSS.

/ * A tivornya 1 * /

var c1_w = 92; / / szélesség tivornya pont

var c1_n = 10; / / száma Összehasonlító tivornya tételek

var c1_pp = 4 / / Összehasonlító száma tivornya tételek perpage

var c1_marginFactor = 51;

var = c1_sss c1_w c1_pp * / / sss = dia lépés nagyság

var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / ns = hány dia

c1_sss + = c1_marginFactor / / sss = dia lépcső méretét, 51 margók

Követelmények: 1,2 Mootools

Demo megtekintése | Letöltés Mootools Carousel A személyhívó 1.0 (Letöltve 1998 alkalommal)