Ilmaista sitä

Eilen, kuten kaikki muutkin "Ground Hog Day", olin työskennellyt joitakin CSS / tableless kaavoista. Kaikki oli menossa hyvin IE 7, FF 3 ja Chrome, untill yhtäkkiä, olen nähnyt joitakin YK-ignorable marginaalit nähnyt vain Google Chrome. Vaikka hyvin outoa ja worring, oli joitakin uusia bug / issue että olin törmännyt, oli lopulta noin mauste minun arkipäiväisiin työhön. Sad (mutta kiva) se sai vakiintui muutaman minuutin anturi ...

Periaatteessa se näytti Google Chrome ohitetaan CSS Nollaa (margin: 0px). Se itse asiassa johtui käyttäjä agentti tyylisivu (-webkit-pehmuste-alku: 40px). Eli ratkaisu oli palauttaa tähän tyyliin asettamalla padding: 0 huonosti elementtejä.
Hyvä tapa estää tämän ongelman tapahtuu mitä tahansa elementtiä on käytettävä globaali CSS Rest seuraavasti

* {Margin: 0; padding: 0;}

Mitä User Agent Style Sheets (Specification)?
Seuraava ote on otettu http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , seuraa linkkiä lukea lisää User Agent Style Sheets

CSS 1 lisätään ajatuksen toteamalla, että jokainen User Agent (UA, usein "selaimella" tai "web client) on oletuksena tyylisivu esittää asiakirjat kohtuullisessa - mutta luultavasti arkipäiväisiin - tavalla. CSS 2 sanoo, että mukaiset selaimet on haettava default style sheet (tai käyttäytyvät ikään kuin he) ja user agent oletuksena tyylitiedosto pitäisi esittää elementtejä asiakirjan kieltä tavalla, joka tyydyttää yleistä esittämistapaa odotuksia asiakirjan kieli, CSS 3 on todennäköisesti sama mielessä.

Koska CSS vaatimukset jättävät toteutuksia, käytetäänkö "oikea" tyylisivu oletustilaan tai ei, se ei ole hämmästyttävää, että et löydä default style sheet jokaisen selaimen asennus kansioon. Toisin kuin Microsoftin Internet Explorer ja Opera, esimerkiksi (ja sikäli kuin tiedän), Gecko selaimissa, kuten Firefox ja Netscape Navigator (etsi "html.css") mutta myös Konqueror tekevät melko helppo ymmärtää niiden default tyyli.

Tässä niistä old school, mutta kuten tavallista, se on minun muisti lisä ...
Joten ei ole käytössä = "true" ja käytössä = "false" sama? Kyllä
... Älä usko, hyvin! thats miten se on ... täällä on muutamia nopeita selitys ...
"Pois päältä" on ominaisuus minkäänlaista elementin / kenttä, ja näin ollen voi hyväksyä arvoa luonteeltaan.

Niin kauan kuin tämä määrite on läsnä, elementti poistetaan käytöstä riippumatta sen arvosta. esim..
<input type="text" value="This on disabled" disabled>
<input type="text" value="This on disabled" disabled="disabled">
<input type="text" value="This on disabled" disabled="true">
<input type="text" value="This on disabled" disabled="false">

Kaikki edellä mainitut tekee tämän luetteloa "käytössä".

Yksinkertaisesti ei tuota määritettä "Disabled" pitää Field "ABLED" ... kuten alla

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

Muistakaa "Mikä tahansa arvo (tai lainkaan arvoa) vammaisten määritteen selain tekevät sen käytöstä". Jotta asiat selväksi mielessämme W3C suosittelee, että käytämme käytössä = "vammaiset" näissä tilanteissa.

Tämä ero kuitenkin kun käyttää tätä ominaisuutta javascript ...

document.form.element.disabled = true; / / elementti poistetaan käytöstä
document.form.element.disabled = false; / / elementti on käytössä

Edellä argumentit pätevät myös näiden attribuuttien:

• tarkastetaan (valintanappi ja valintaruutu)
• valittu (optio)
• nowrap (td)

Google aloittaa liike kannustaa ihmisiä upottaa IE6 ... By nakkaa IE6 käyttäjät POPUP sivulla kuorma ... ei välttämättä ole kovin hyvä idea ... mutta on UI kehittäjä, minun täytyy liittyä tämän bändin vaunun ... yksi vähemmän selainta minun huolehtia ... Anteeksi itsekäs se on! mutta olen myös tätä javascriptiä ... (TRY Tämän sivun IE6) ...
Hei! ja kirkkaampi huomautuksen ... Katso se näyttö POWER JavaScript .... se voi jopa kaataa jättiläinen (tai kun se oli)

SO ... Auta poistamaan maailmasta IE6 yhden rivin JavaScript!

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

Toisella selaimella huolta huomisesta! (IE8 tulee ulos Beta valtion huomenna) ... Sen todella korkea aika IE6 annetaan pitkät johtuen Mercy Death ... Iso kannatamme syksyllä IE6

"IE6 on uusi Netscape 4. Hakata tarvitaan tukemaan IE6 yhä pitää ylimääräinen rahti. Kuten Netscape 4 vuonna 2000, IE6 koetaan pidättelevän www. "

Jeff Zeldman, standardit guru

Ja sillä välin niille kuin minä, joka tulvii puhelut murtaa CSS kaavoihin IE8, täällä on vanha kiertää / korjata käyttäen meta (meta http-ekv = "X-UA-Compatible") voisit kokeilla ...

Mis-käyttäytyy IE8: CSS Layout katkenneita (kohdistaminen selainversiota käyttäen meta IE8)

Tässäpä toinen vähän peice Javascript kikkailu, että minun piti kaivaa noin, koska tilanne commaned sitä. Yhdessä minun sivustoja, minulla oli tämä tilanne, jossa minun piti toteuttaa "windows.onload" kahdesti. Ensimmäinen asia, joka tuli kokemattomalle mieleen kuin minun (Täytyy rehellisesti sanoa, että koska olen käyttänyt javascript puitteisiin ja kirjastot, olen forgotton tehdä yksinkertaisia ​​asioita itse ... surullista mutta totta), on seuraavan menetelmän ...

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

Ikävä sanoa, mutta tämä tapa toimia ... dont halua keskustella toteuttamiseen tiede Javascript paljon ... mutta oman viimeaikaisten kokemusten, vain viimeinen toiminto (onloadfn3) on sairas todella saada teloitettiin.

Normaaleissa tilanteissa, toisin kuin minun (jonka minä puhua hieman myöhemmin) ... voisit jollakin seuraavista suorittaa mutliple onload toiminnot ....

Tai jotain tällaista

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

Minun nykyinen tilanne, en voi käyttää kumpaakaan edellä ...
Miksi minun pitää soittaa windows.onload kahdesti, vaan että soittaa kaksi tehtävää yhden onload funktio? Tässä vilkaista minun ongelmani ilmoitus ...

"Oman sivuston sivut on rakennettu kuten WordPress teema .... eli ei yhteistä Header.php ja footer.php, joka sisällytetään kaikkiin sivuille. On onload funktio implementaion vuonna footer.php tehdä joitakin yhteisiä onload toimintoja. Ja on muutamia sivuja, jotka tarvitsevat jotain omaa lataustapahtuman, lukuun ottamatta tehnyt yhteisiä onload toimintoa. Jos liittää takaisinkutsufunktio suoraan window.onload ohjaaja, se ohittaa aiemmin määritetty kutsuja on footer.php "

.... Onko minun ongelmani ymmärtää ?

No! on olemassa muutamia ratkaisuja, en löydä. Ne kaikki ovat hyvin samanlaisia ​​ja pääasiassa implementions ja liuoksen annetaan Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Ratkaisu:

Lisää vain tämä javascript-koodin sivusto ...

 toiminto addLoadEvent (FUNC) {
     var oldonload = window.onload;
     if (typeof window.onload! = 'toiminto') {
        window.onload = FUNC
     } Else {
        window.onload = function () {
            Jos (oldonload) {
                   oldonload ()
           }
           FUNC ()
        }
    }
 }

Ja kutsuvat sitä sen sijaan, että "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Lisää koodin suorittamisen sivunlatauksella *
 }); 

Edut Tämän koodinpätkän ...
1. Ensisijaisesti se voit olla useita windows.onload tapahtumia, soitti erillistä osiin koodia ilman overridding edellinen määritelmä
2. Se on todella huomaamaton. Se voidaan sijoittaa tiedoston sinun on skriptejä tai erilliseen tiedostoon.
3. Se toimii vaikka window.onload on jo asetettu.

Toinen nopea TTY. Tässä on jotain yksinkertaista ja mukava käyttää POWER CSS ... mutta oli vaikea concieve (ja se varmasti ollut minä), aluksi. Lisääminen Dropshadow, saattaa olla peice kakkua monille meistä, käyttäen joitakin kuvankäsittelyn työkalut, kuten Photoshop ANF Ilotulitus jne.
Syy miksi olen valinnut varjon CSS on, että yleensä luotaessa sivujen suunnittelu / html hakemuksen, vaatimukset pitää iteroimalla. Tällä tarkoitan sitä, In olemassa sivusto, jossa paljon kuvia, kuten ne näyttävät freinds luetteloa tai kuvagalleria, on vaikea käsitellä uudelleen koko kuorma kuvia, jotka oli jo purettu lisätä tai poistaa varjoja, sillä asia.
Joten jos olet tehnyt hieman eteenpäin ajattelua luotaessa HTMLS lisätä nämä ylimääräiset osastojen tai yleensä tilanne on se, että sinulla on Loop Logic tuottaa näitä kuvakkeita / miniatyyrit XSL, PHP. JAVA tai muu ohjelmointi / skriptikieli, voit lisätä sen milloin tahansa, niin on vain kysymys näyttää ja piilottaa nämä varjot käyttämällä CSS-ominaisuutta display, kohti asiakkaiden alati muuttuviin tarpeisiin ... En havn't tehnyt tällaista eteenpäin ajattelu ennen tätä ... mutta ahev jo nyt!

Alla olevassa esimerkissä, alkuperäinen kuva on varjo vapaa ja dropshadows sovelletaan tarpeen mukaan! Lisäksi olen mennyt vähän ylimääräistä, käyttämällä temppuja minun aiemmin Tut (Well! nämä luultavasti on lyhin erilaisia ​​Tutorials, joten se on perusteltua vain kutsuen heitä "Tut": n) noin CSS Clip Property for leveillä vain

Alkuperäinen kuva

CSS DropShadow Tulokset

Katso esittely | Lataa sourcefiles

Miksi haluan ymmärtää tämän??? ... Humm!!

Useimmat CSS kirjoittajat samaa mieltä siitä, että CSS Clip omaisuus on luultavasti yksi kaikkein un käytettyjä CSS-ominaisuuksia. Se oli niin totta minullekin ja oli erittäin iloinen jättää huomiotta sitä, kunnes aloitin muokkaamalla MooTools KAKSI Knob (Pin) Slider Komponentti (Alueen Indicator) .

Oli hyvä ehdotus yhdestä komponentin käyttäjät voivat muokata Slider Component käyttäen leikattu taka kuvia (vasten muuttuja leveys jako) osoittamaan liukusäädintä alue. Näin tuli minun aikani tulla hauska, mutta un-charter (minulle tietysti) vedet CSS Clip omaisuutta.

No! kuinka vaikeaa voi olla? Ei paljon ollenkaan ... Kyllä ja ei. Syntaksi käyttää CSS Clip omaisuus on melko pystyssä, mutta merkitys / usuage on vähän croocked. Kun muisti kuin minun, Everytime I istua muokata minun Slider Script ... Minulla tokeep viittaa takaisin käyttöön tämän CLIP omaisuuden muistuttaa itseäni logiikkaa, että olen luonut minun script .... Näin! ajattelin kynä alas ja toivoa muistaa se tulevaisuudessa (ja myös Niille, jotka näyttävät boggled jota CSS Clip Property)

Mitä CSS Clip tekee?

Clip on osa visuaalisia tehosteita moduulin CSS 2.1. Yksinkertaisesti sanottuna, sen tehtävänä on asettaa näkyvän ikkunan päälle esine, joka on leikattu, joten syväyspolku kuvia ja luoda pikkukuvia ilman luoda uusia tiedostoja (Olen jo laittaa tämän ominaisuuden käyttää paremmin Slider Component )

Käyttämällä CSS Clip ominaisuuden avulla voit luoda rajaavan käyttäen rect muodon. Kuten monet muutkin CSS-ominaisuudet (kuten margin, padding jne.) käyttäen rect vaatii neljä koordinaatit Top, Oikea, Ala, Vasen (HÄIRIÖ). Croocked luonne ominaisuus heijastaa kun otat tarkemmin miten clip laskee rajaavan alueen käyttäen nämä neljä koordinaatit (lähettää aivot heittää hetkeksi). Nyt hämmentää teitä pohja alkaa ylhäältä ja oikealla alkaa vasemmalta. . Näet mitä sanoin? .... Siksi tämä viesti ...

Tämä pieni sekaannus voi helposti kadota, tämä visuaalinen kuvaus CSS Clip / rect omaisuuden alla!!

CSS Clip Vaatimukset

Tehtävä olemme alkaneet on leikata seuraavat Pienoiskuva kuvan squarer näköinen kuva (ja myös laajakulma kuva)

Alkuperäinen Thumbnal / Image	Clip vaatimukset Sqaure Thumbmail

CSS Clip Tulokset

Katso esittely | Lataa sourcefiles

Joskus pitää pageweight alas ... olemme jakaneet skriptejä palasiksi ... Nämä javascript fragmentit voidaan ladata ja kun tarvitaan (on tapahtuma tai napsauttamalla linkkiä tai painiketta jne.).

Ladataan JavaScript dynaamisesti on yksinkertainen ja melko suoraan eteenpäin alla ...

= “text/javascript” > <Script type = "text / javascript">
toiminto loadNewScript (lähde) {
var s = document.createElement ('script');
s.setAttribute ("tyyppi", "text / javascript");
s.setAttribute ("src", lähde);
document.body.appendChild (s);
}
</ Script>

ja voit olla seuraava kutsu linkkiä missä tahansa kehon, tai voit saada tämän script "onLoad"-asiakirjan itse ...

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

tai

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

Jos olet css henkilö, tietäisit kipua saada teidän asettelut toimivat rajat selaimen. IE8 on jälleen kapuloita teokset meille kehittäjille. Anywaz! Jos osut tätä kysymystä, kuten tein eilen, missä täydellisesti toimivat CSS IE7 (ja aiemmin) ja Firefox on yhtäkkiä alkanut heittää kiukuttelut IE8, kokeile ... Se kauniisti näytti korjata ongelmani tällä hetkellä ....

Käyttämällä Meta ilmoitus, voimme määrittää renderoija haluaisimme IE8 käyttää. Joten pakottaa IE8 tehdä kuin IE7 ... Lisää seuraavat Metakoodi osaksi pään sinun asiakirjan: -

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

Oletuksena IE Meta olisivat: -

<META http-equiv="X-UA-Compatible" content="IE=8" />
mikä tekisi IE8 tehdä sivulle uusia standardeja tilassa.

Haluttaessa syntaksi voidaan käyttää mahtuu muiden selaimien kuten alla:

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

MORE About DOCTYPES:

Jos et vielä tunne sellaista eläintä nimeltään "DOCTYPE" ... tässä on muutamia nopeita lukea
Mitä DOCTYPES? Mitkä ovat selain koukero & STRICT tila?
Asettaminen DOCTYPE on XSL

Saat syvällisempi ymmärrys DOCTYPES, voit käydä nämä linkit ...
List Apart: Fix sivustosi oikea DOCTYPE!
List Apart: Beyond DOCTYPE: Web Standards, Forward Compatibility, ja IE8

Huomautus: Vaikka monet meistä HTML / CSS ihmiset ovat laiminlyönnistä merkitys DOCTYPE decleration meidän asiakirjojen asettaminen oikea DOCTYPE, yleensä vastauksen useimpiin eri selaimet.

Monien Karusellit siellä, monet Mootools myös, olen silti päättänyt kirjoittaa oman Carousel luokka, on hyviä syitä
1. Halutaan henkilöhaku ominaisuus (voisi siirtyä erityisesti dia / askel karuselli).
2. Ostetaan vapaus sijainnin vasen ja oikea painike / linkkejä, missä ikinä olen hyvä.
3. Lisää valvoa Slide Steps.

En onnistunut luomaan uuden Carousel, jossa edellä mainitut ominaisuudet ... alla ... Voit vapaasti ehdottaa muutoksia te vaatisi!

Oma esimerkki näyttää tältä ... [ View Demo ]

Katso esittely | Lataa Mootools Carousel With Paging 1.0 (Downloaded 2001 kertaa)

1. Carousel Hakulaite

Voit helposti lisätä henkilöhaku teidän karuselli yksinkertaisesti asettamalla henkilöhaku lippu, joka on viimeinen parater läpäissyt luotaessa esiintymän MooCarousel todelliseen (haluta paging) tai epätosi (antaja haluaa paging).

var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright ", c_ns, c_sss, true); / / ns = useita dioja, SSS = slide askelkoko

Ja tietysti voit muuttaa ulkoasua-n-tuntuu näiden henkilöhaku achors kuten haluat muokkaamalla sen CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging. Nykyinen. Carousel_paging. Sivu {outline: none; width: 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover. Carousel_paging. Nykyinen {background: # 4D4D9B; color: # ffffff;}

No! on pieni asia kuitenkin, henkilöhaku ankkurit jos asetettu, niin se saa syntyy aina kun Carousel komponentti. Halusin tehdä dynaamisia samoin, mutta sitten vain pitää Script puhaltaa ulos mittasuhteet, päätin ohittaa sen.
Mutta te tiedätte vähän Javascript, voit helposti muokata henkilöhaku sukupolvi koodin MooCarousel luokassa miellyttää teidän tarpeisiin.

2. Kustomointi vasen ja oikea kuvakkeet

Voit muuttaa sijoitusta, IMAGES tai displat omaisuutta vasenta ja oikeaa näppäintä yksinkertaisesti pelaa noin kanssa CSS. pystyä muuttamaan sijoitukset vasen ja oikea buttoms oli todellinen syy minun oikealle minun meidän Carousel luokka.
Koska MooCarousel luokan hyväksyy id on näitä painikkeita, voit itse sijoittaa nämä painikkeet mihin tahansa sivulla, jos sallitte ... ei tarvitse olla elementin hierarkiassa, kuten minun esimerkiksi.

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; kanta: suhteellinen, leveys: 23px; height: 20px; float: left; kohdistimen: osoitinta;}

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

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

3. Kustomointi Slide Steps

Mitä tarkoitan MINUN Kustomointi SLIDE vaiheet?
Useimmat Karusellit liu'uta täynnä on näkyvissä ikkunasta. Joten sano oli neljä kohteita (kuten minun esimerkin kohta), se liukuu kaikki neljä aihetta. Tämän Carousel Component, Ohitat määrä dioja ja askel haluamansa kokoiseksi.

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

Myös minun Esimerkki1 olen calcuted dia askeleen koko sen logiikka missä, tiedän kappalemäärä, leveys kunkin kohteen ja marginaalit, jotka ovat antaneet jälkeen kunkin kohteen CSS.

/ * Jos juomingit 1 * /

var c1_w = 92; / / juomingit Item leveys

var c1_n = 10; / / kokonaislukumäärä Vertailuvuoden juomingit Tuotteet

var c1_pp = 4 / / määrä Vertailuvuoden juomingit Tuotteet perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / SSS = slide askelkoko

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / ns = useita dioja

c1_sss + = c1_marginFactor; / / SSS = slide askeleen koko, 51 ja marginaalit

Vaatimukset: Mootools 1,2

Katso esittely | Lataa Mootools Carousel With Paging 1.0 (Downloaded 2001 kertaa)