Vyjadrenie IT

Včera, ako každý iný "Deň pozemného Hog", som pracoval na niektorých CSS / beztabulkový rozvrhnutie. Všetko išlo dobre v IE 7, FF 3 a Chrome, až do roku náhle som videl, niektoré nie-ignorable rozpätie videnie iba v prehliadači Google Chrome. Hoci veľmi podivné a worring, to bola nejaká nová chyba / problém, ktorý som prišiel naproti cez, tam bol nakoniec niektoré korenia vo svojej svetskej prácu. Sad (ale pekný) sa dostal určujú počas niekoľkých minút sondy ...

V podstate to vyzeralo, že Google Chrome ignoroval moju CSS Obnoví ods margin: 0px). V skutočnosti to bolo spôsobené štýlom užívateľského agenta (-WebKit-padding-štart: 40px). Takže riešenie bolo obnoviť tento štýl nastavením padding: 0 nespráva prvky.
Dobrým spôsobom, ako predísť tomuto problému deje na akúkoľvek časť je použiť globálne CSS Rest takto

* {Margin: 0; padding: 0;}

Čo je to užívateľa listy Agent Style (špecifikácie)?
Nasledujúci úryvok je prevzatý z http://meiert.com/en/blog/20070922/user-agent-style-sheets/ ~ ~ HEAD = pobj a následných odkazu sa dozviete viac na užívateľa listy Agent štýlu

CSS 1 predstaví myšlienku tým, že každá User Agent (UA, často "webový prehliadač" alebo "webový klient"), bude mať predvolený štýly, ktoré predstavuje dokumenty v prijateľnej - ale pravdepodobne všedný - spôsob. CSS 2 hovorí, že vyhovujúce užívateľské jednotky sa musia použiť štandardné štýly (alebo sa správajú, ako keby tomu tak bolo), a že užívateľský agent defaultne štýlov by mala predložiť prvky dokumentu jazyk v cestách, ktoré spĺňajú všeobecné prezentácie očakávania jazyk dokumentu, CSS 3 je pravdepodobne rovnaké mysli.

Vzhľadom k tomu, CSS špecifikácia ponechať na implementáciu, či sa používajú "skutočný" štýlov pre predvolené zobrazenie, alebo nie, to nie je prekvapujúce, že sa vám nepodarilo nájsť predvolenú šablónu štýlov v každom prehliadači je inštalačný zložky. Na rozdiel od Internet Explorera spoločnosti Microsoft, rovnako ako opera, napríklad (a pokiaľ je mi známe), Gecko prehliadače ako Firefox a Netscape Navigator (pozrite sa na "html.css"), ale aj Konqueror, aby bolo pomerne jednoduché pochopiť ich predvolený štýl.

To ty stará škola, ale ako obvykle je to moja pamäť doplnok ...
Tak je zakázaný = "true" a vypnúť = "false" rovnako? Áno
... Neverte, dobre! to je spôsob, akým je ... tu je nejaké rýchle vysvetlenie ...
"Vypnuté" je atribútom akejkoľvek podobe prvku / odbor, a preto môže prijať žiadnu hodnotu vo svojej podstate.

Tak dlho, ako tento atribút prítomný, prvok zakázaná bez ohľadu na jeho hodnotu. napr pre.
<input value="This je disabled" disabled>
<input value="This je disabled" disabled="disabled">
<input value="This je disabled" disabled="true">
<input value="This je disabled" disabled="false">

Všetky vyššie uvedené bude táto forma pole "Disabled".

Jednoducho neposkytuje atribút "Disabled" drží pole "ABLED" ... rovnako ako nižšie

<input value="This nie je disabled" />

Pamätajte, "Akákoľvek hodnota (alebo žiadnu hodnotu vôbec) postihnutého atribútu, prehliadač vyjadriť to zakázané". Aby sa veci jasno v našich mysliach W3C odporúča, aby používame vypnuté = "vypnúť" v týchto situáciách.

To je rozdiel keď keď použijeme tento atribút v javascriptu ...

document.form.element.disabled = true; / / prvok bude zakázaný
document.form.element.disabled = false, / / prvok bude povolený

Vyššie uvedené argumenty platia aj pre tieto atribúty a ich častí:

• skontrolovať (rádio tlačidlá a zaškrtávacie políčko)
• vybrané (na želanie)
• nowrap (td)

Google spustí pohyb vyzve ľudí, aby výpis IE6 ... Do užívateľov IE6 odpočúvacie s POPUP na načítanie stránky ... nemusí byť dobrý nápad ... ale ako autor UI, musím sa pripojiť k tomuto kapelu vozu ... jeden menej prehliadač pre mňa báť ospravedlňujeme sa ... sebecká to je! ale ja som zahrnúť túto javascript ... (TRY tejto stránky V IE6) ...
Hej! a na jasnejšie poznámke ... vidieť, že je displej POWER JavaScriptu .... môže dokonca znížiť obra (alebo raz to bolo)

SO ... Pomoc zbaviť svet IE6 s jedným radom javascript!

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

S iným prehliadačom starať od zajtra! (IE8 vychádza z jeho beta štátnej zajtra) ... je to naozaj najvyšší čas, IE6 je vzhľadom k jeho dlho kvôli Mercy smrť ... V jednote je sila k pádu IE6

"IE6 je nový Netscape 4. Tieto hacky potrebné pre podporu IE6 sa stále viac vnímaná ako nadmerné nákladnej dopravy. Ako Netscape 4 v roku 2000, je vnímaná ako IE6 brzdí web. "

Jeff Zeldman, normy guru

A medzitým pre tých, ako ja, ktorí budú zaplavené volanie z porušenia rozvrhnutia CSS v IE8, tu je starý obísť / vyriešiť pomocou meta tagy (meta http-equiv = "X-UA-Compatible"), ktoré by sa mohli pokúsiť ...

Mis-choval IE8: CSS Layout rozbíjať ods Zacielenie na verziu prehliadača pomocou meta tagy v IE8)

Tu je ďalší malý peice z podvodu JavaScriptu, ktoré som musel kopať okolo, pretože situácia commaned to. V jednom z mojich webových stránok, mal som túto situáciu, kedy som musel vykonávať "windows.onload" dvakrát. Prvá vec, ktorá by prišla do pamäte, neskúsený ako ja (Musím úprimne povedať, že od tej doby som sa pomocou JavaScriptu rámcov a knižnice, som forgotton robiť jednoduché veci na vlastnú päsť ... smutné, ale pravda), je táto metóda ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 atď ..

Ospravedlňujeme sa, ale na, zvyknutý túto prácu ... nechcem diskutovať o vykonaní vedu Javascript moc ... ale podľa mojej nedávnej skúsenosti, (onloadfn3) len posledný funkcie zle vlastne vykonaný.

V normálnych situáciách, na rozdiel od bane (čo budem hovoriť o niečo neskôr) ... môžete urobiť jednu z nasledujúcich možností na vykonanie zahŕňa viac onload funkcie ....

Alebo niečo také

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

Pre moje súčasnej situácii, nemôžem použiť niektorý z vyššie uvedených ...
Prečo musím zavolať windows.onload dvakrát, skôr to, že volanie dve funkcie v jednom onload funkcie? Tu je rýchly pohľad na môj problém vyhlásenie ...

"Moje stránok stránky sú štruktúrované ako WordPress Téma .... teda existuje spoločný Header.php a Footer.php, ktorý sa zaradené do všetkých stránok stránkach. K dispozícii je funkcia onload implementaion v Footer.php urobiť nejaké spoločné onload funkcie. A existuje niekoľko stránok, ktoré je potrebné niečo vlastného onload, na rozdiel od tých, ktoré uskutočňuje spoločné onload funkcie. Keby som priradiť funkciu spätného volania priamo na window.onload psovoda, bude to cez-jet skôr pridelené spätné volania v Footer.php "

.... Je to môj problém chápať ?

No! existuje niekoľko riešení, ktoré som nájsť. Všetci sú si veľmi podobné a hlavne implementions roztoku danej Simon Willison ods http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Riešenie:

Stačí pridať tento kód javascript na stránky ...

 else { window.onload = function() { if (oldonload) { oldonload() } func() } } } Funkcia addLoadEvent (func) {var oldonload = window.onload if (typeof window.onload = "funkcie"!) {Window.onload = funkcie} else {window.onload = function () {if (oldonload) {oldonload () } funkcie ()}}} 

A volať to miesto obvyklého "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Viac spustenie kódu na * načítaní stránky
 }); 

Výhody tohto fragmentu kódu ...
1. V prvom rade, to vám umožní mať viac windows.onload udalosti, volal z oddelených častí kódu, bez toho, aby overridding predchádzajúcej definícii
2. Je to naozaj decentné. To môže byť umiestnená v súbore s vašimi ostatnými skripty alebo v samostatnom súbore.
3. Funguje to aj v prípade, že window.onload už nastavený.

Ďalšie rýchla tut. Tu je niečo jednoduché a príjemné použitie sily CSS ... ale bolo ťažké poňať (a to určite nebol ja) začať. Pridanie Dropshadow, môže byť peice torte pre mnohých z nás, používať niektoré nástroje pre úpravu obrazu, ako Photoshop ANF ohňostrojov atď
Dôvod, prečo som sa rozhodla pre tieni pomocou CSS je, že obvykle pri vytváraní stránky design / html žiadosti, aby požiadavky iterácie. Čo chcem povedať je, Vo existujúce webové stránky s mnohými obrázkami, ako sú tie, zobrazujúci freinds zoznam alebo galériu obrazu, to bude ťažké znovu spracovať celý zaťaženie obrázkov, ktoré už boli vyložené pridať alebo odstrániť tiene, pre ktoré záležitosť.
Takže ak ste urobili trochu myslia dopredu a vytvorili HTMLS pridať tieto ďalšie divízie, alebo sa obvykle situácia taká, že máte Loop Logic generujúce tieto ikony / náhľadmi v XSL, PHP. JAVA alebo akékoľvek iné programovací / skriptovací jazyk, môžete ho pridať kedykoľvek, potom je len otázkou show a skrýva tieto tiene pomocou CSS vlastnosť Display, ako na klientov, stále sa meniace požiadavky na ... Ešte si sa urobil som tento druh myslia dopredu pred tým ... ale ahev začala teraz!

V nižšie uvedenom príklade, pôvodný obrázok tieni zadarmo a dropshadows sú použité podľa potreby! Tiež som išiel niečo navyše, pomocou trikov z mojich predchádzajúcich Tutanchamóna v Well! To asi sú najkratšie množstvo cvičení, tak to je oprávnená len vtedy, volať je "Tut" 'y) na použitie CSS vlastnosť klip pre predviesť iba

Pôvodný obraz

CSS DropShadow Výsledky

Zobraziť Demo záložky | Stiahnuť sourcefiles

Prečo chcem to pochopiť?? Humm ...!!

Väčšina spisovateľov CSS by sa zhodujú, že CSS vlastnosť Clip je pravdepodobne jedným z najviac un-používané vlastnosti CSS. Bolo to tak aj môj prípad a bol najviac šťastný, že zanedbávať to, kým som začal úpravou MooTools TWO Knob (PIN) Slider komponenty (s prechádzajúcom Indicator) .

Tam bol dobrý návrh od jedného z čiastkových užívateľov upraviť pomocou komponenty Slider pripnutý zázemie obrázkov (proti premennú šírku divízie), čo znamená posuvník rozsah. Tak prišiel môj čas vstúpiť na zábavu, ale nie-znalca (Samozrejme pre mňa) vody z majetku Galéria CSS.

No! aké ťažké to môže byť? Nič moc ... áno aj nie. Syntax clip CSS vlastnosť je dosť vzpriamené, ale význam / usuage je trochu croocked. S pamäťou ako ja, zakaždým sedím prepracovať na mojom Slider Script ... Mám tokeep odkazuje späť na použitie tohto majetku CLIP, pripomenul sám sebe logiku, ktoré som vytvoril vo svojom skripte .... Preto! myšlienka pera dole, s nádejou, ako si pamätať, že budúcnosť (a tiež v prospech tých, ktorí sa zdajú boggled v majetku Galéria CSS)

Čo CSS klip robiť?

Klip je súčasťou vizuálnych efektov modulu CSS 2.1. Jednoducho povedané, jeho úlohou je umiestniť viditeľné okno v hornej časti objektu, ktorý je pripnutý, teda orezanie snímok a vytváranie náhľadov bez nutnosti vytvárať ďalšie súbory v už som dal túto funkciu k lepšiemu využitiu v komponente Slider )

Pomocou vlastnosti Clip CSS, môžete vytvoriť výstrižok pomocou tvar rect. Ako mnoho iných vlastností CSS (ako okraj, zateplenie atď), za použitia rect vyžaduje štyri súradnice hore, vpravo, dole, vľavo (TRBL). Croocked povaha tohto majetku zodpovedá, keď sa bližšie pozrieť na to, ako klip vypočítava orezovú oblasť, používať tieto štyri súradnice (vysiela mozog do hoďte na chvíľu). Teraz sa zmiasť dole začína od hornej a pravý začína zľava. . Vidíš, čo som povedal? .... Preto tento príspevok ...

Tento malý zmätok môže ľahko zmiznúť, s týmto vysvetlením vizuálne CSS Galéria / rect majetku, ktorý je nižšie!!

CSS Clip Požiadavky

Úloha sme začali, je klip na nasledujúce miniatúry do hranatejšie hľadá obrazu (a tiež širokouhlý obraz)

Pôvodný Thumbnal / Image	Clip Požiadavky na radové Thumbmail

CSS Clip Výsledky

Zobraziť Demo záložky | Stiahnuť sourcefiles

Niekedy, aby pageweight dole ... sme rozdelili naše skripty na kúsky ... Tieto fragmenty javascriptu možné načítať podľa potreby (na udalosti alebo kliknutím na odkaz alebo tlačidlo pod.)

Nahrávám JavaScripty dynamicky je jednoduchá a docela rovno vpred nižšie ...

= “text/javascript” > <script Type = "text / javascript">
Funkcia loadNewScript (zdroj) {
var s = document.createElement ('script');
s.setAttribute ("typ", "text / javascript");
s.setAttribute ("src", zdroj);
document.body.appendChild (y);
}
</ Script>

a môžete mať nasledujúci odkaz hovoru kdekoľvek v tele, alebo môžete mať tento skript "onLoad" dokumentu samotného ...

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

alebo

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

Ak ste osoba, CSS, mali by ste vedieť, ako sa vaša bolesť v rozvrhnutí pracovného cross-browser. IE8 je ďalší kľúč v prácach pre nás vývojári. Anywaz! Ak narazíte na tento problém, ako som to urobil včera, kde si dokonale fungujúci CSS v IE7 (a skôr) a Firefox sa náhle začali hádzať záchvaty hnevu v IE8, skúste toto ... Je pekne vyzeralo opraviť svoje problémy na chvíľu ....

Pomocou Meta vyhlásenie, môžeme špecifikovať vykresľovací jadro IE8 by sme chceli použiť. Takže nútiť k tomu, ako je IE8 IE7 ... vložte nasledujúce značku metadát do hlavy dokumentu: -

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

V predvolenom nastavení IE Meta bude: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
ktorý by IE8 zobrazení stránky pomocou novej normy režimu.

V prípade potreby možno túto syntax použiť na ubytovať u iných prehliadačov ako je uvedené nižšie:

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

VIAC O DOCTYPES:

AK si ešte nepoznajú druh zvieraťa zvané "doctype" ... tu je nejaká rýchla čítať
Čo sú DOCTYPES? Čo sú to internetové Quirks a Prísny režim?
Nastavenie DOCTYPE v XSL

Pre podrobnejšie pochopenie, DOCTYPES, skúste navštíviť tieto odkazy ...
Zoznam APT: Fix vaše stránky So správnym DOCTYPE!
Zoznam APT: Beyond DOCTYPE: Webové štandardy a doprednou kompatibilitu, a IE8

Poznámka: Aj keď mnohí z nás HTML / CSS ľudia boli zanedbávanie význam DOCTYPE decleration v našich dokumentoch, nastavenie správneho DOCTYPE, je zvyčajne odpoveďou na väčšinu otázok priečnych prehliadači.

S rôznymi kolotoče vonku, veľa pre MooTools tiež, stále sa rozhodol napísať vlastnú Carousel triedy, pre niektoré z dobrých dôvodov
1. Chcel stránkovací funkcie (mohli skočiť konkrétny snímok / krok v karuselu).
2. Chceli slobodu, umiestnenie na ľavý a pravý tlačidlá či odkazy, kde vôbec sa mi zapáči.
3. Väčšiu kontrolu nad Slide schodov.

Ja sa podarilo vytvoriť nový Carousel, s vyššie uvedenými funkciami ... ako je uvedené nižšie ... Nebojte sa navrhnúť nejaké zmeny by ste vyžadovať!

Môj Príklad vyzerá takto ... [ View Demo ]

Zobraziť Demo záložky | Stiahnuť MooTools Carousel S stránkovacieho verzia 1.0 (stiahnuté 1995 krát)

1. Kolotoč Paging

Môžete ľahko pridať stránkovania do kolotoča, jednoducho nastavením stránkovací vlajku, čo je posledný parater prešiel pri vytváraní inštancie MooCarousel na hodnotu true (chcete stránkovací) alebo false (donot chce stránkovania).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true); / / ns = počet snímok, sss = snímok veľkosť kroku

A samozrejme môžete zmeniť vzhľad-n-štýl týchto vyhľadávacích achors, ako je libo úpravou ich CSS.

. Carousel_paging {text-align: právo; margin: 5px 10px 0 0;}
. Carousel_paging prúd, carousel_paging stránku {outline: none; šírka: týždeň. 15px, výška: 15px; line-height: 15px; text-align: centrum; display: block; float: left; pozadia: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover, carousel_paging prúd {background: # 4D4D9B, color: # FFFFFF;} ..

No! tam je malý problém keď, ak je nastavená, stránkovací kotvy potom to dostane generovaný vždy po Carousel komponenty. Chcel som, aby to dynamický tiež, ale potom už len, aby scenár k fúkanie rozmerov, rozhodol som sa ju preskočiť.
Ale viete, trochu Javascript, môžete ľahko upraviť stránkovací generácie kód v MooCarousel triede potešiť svoje potreby.

2. Prispôsobenie ľavý a pravý ikony

Môžete zmeniť umiestnenie, obrázky ani disple majetok z ľavého a pravého tlačidla jednoducho tým, že hranie sa s CSS. mať možnosť zmeniť umiestnenie medzi ľavým a pravým Privolávacie bol skutočný dôvod, aby som na pravú mojej našej Carousel triedy.
Vzhľadom k tomu, MooCarousel triedy, prijme id je z týchto tlačidiel, môžete skutočne umiestniť tieto tlačidlá kdekoľvek na stránke, prosím ... to nemusí byť v hierarchii prvkov, ako v mojom príklade.

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; pozície: relatívna, šírka: 23px; výška: 20px; float: left; cursor: pointer;}

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

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

3. Prispôsobenie snímok kroky

Čo tým myslím MOJE Prispôsobenie snímok kroky?
Väčšina Kolotoč posuňte plne s z viditeľného okna. Takže povedať, že mal štyri položky (ako v mojom vzorke vyššie), bude to kĺzať všetky štyri položky. S týmto Carousel Component, miniete niekoľko snímok a veľkosť kroku podľa vášho výberu.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true);
c_ns = počet snímok, c_sss = snímok veľkosť kroku

Aj v mojom example1 som calcuted prezentáciu veľkosť kroku, založený na logike kde, viem, že počet položiek, šírka na každej položky a marží, ktoré dali za každou položkou v mojom CSS.

/ * Pre Pitka 1 * /

var c1_w = 92 / / Pitka položky Šírka

var c1_n = 10 / / Celkový počet položiek porovnávané Pitka

var c1_pp = 4 / / Počet porovnávanej perpage Pitka položky

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = snímok veľkosť kroku

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / ns = počet snímok

c1_sss + = c1_marginFactor, / / ​​sss = snímok veľkosť kroku, 51 pre okraje

Požiadavky: MooTools 1.2

Zobraziť Demo záložky | Stiahnuť MooTools Carousel S stránkovacieho verzia 1.0 (stiahnuté 1995 krát)