Expressant IT

Ahir, com tots els altres "Dia de la Marmota", jo estava treballant en alguns dissenys de CSS / sense taules. Tot anava bé en IE 7, 3 FF i Chrome, fins que de sobte, vaig veure uns marges d'un-ignorant vist només de Google Chrome. Encara que és molt estrany i preocupant, era un tema nou bug / que m'havia trobat, per fi hi va haver una mica d'especialistes en el meu treball mundà. Trist (però agradable) que es fixa en uns pocs minuts de la sonda ...

Bàsicament, es veia com Google Chrome va ignorar la meva Restableix CSS (margin: 0px). En realitat, va ser causat per el full d'estils agent d'usuari (-webkit-padding-inici: 40px). Així que la solució consistia a restablir l'estil i configuració padding: 0 els elements es comporten malament.
Una bona manera d'evitar que aquest problema passi a qualsevol element és l'ús d'un mundial de descans CSS de la següent manera

* {Margin: 0; padding: 0;}

Què és la de l'usuari fulles d'estil Agent (especificacions)?
El següent extracte és pres de http://meiert.com/en/blog/20070922/user-agent-style-sheets/ enllaç, seguiu per llegir més sobre els Fulls d'Estil de l'usuari de l'agent

CSS 1 presenta la idea a l'afirmar que cada agent d'usuari (UA, sovint un "navegador web" o "client web") tindrà un full d'estil per defecte que presenta els documents en un temps raonable - però sens dubte el mundà - forma. CSS 2 diu que els agents d'usuari conformes de sol · licitar un full d'estil per defecte (o comportar-se com si ho van fer) i aquest full d'un agent d'usuari és l'estil per defecte ha de presentar els elements del llenguatge del document de manera que satisfacin les expectatives generals de presentació per a la llengua del document, CSS 3 és probable que sigui de la mateixa opinió.

Atès que les especificacions CSS deixar en mans de les implementacions de la possibilitat d'utilitzar una "veritable" full d'estil per a la visualització per defecte o no, no és sorprenent que no es troba un full d'estil per defecte en la carpeta d'instal · lació de cada navegador. A diferència d'Internet Explorer de Microsoft, així com Opera, per exemple (i fins on jo sé), els navegadors Gecko, com Firefox i Netscape Navigator (cerqueu "html.css"), sinó també el Konqueror ho fan bastant fàcil de comprendre el seu estil predeterminat.

Aquesta escola dels antics, però com sempre és el meu suplement de la memòria ...
El que està desactivat = "true" i els discapacitats = "false" el mateix? Sí
... No creguis, també! aquesta és la forma en què es ... aquí hi ha una explicació ràpida ...
"Discapacitat" és un atribut de l'element de cap forma / camp i per tant, pot acceptar qualsevol valor per la seva naturalesa.

Sempre que aquest atribut és present, l'element es desactiva independentment del seu valor. per, per exemple.
<input type="text" value="This és disabled" disabled>
<input type="text" value="This és disabled" disabled="disabled">
<input type="text" value="This és disabled" disabled="true">
<input type="text" value="This és disabled" disabled="false">

Tot això farà que el camp de formulari aquesta "discapacitat".

Simplement no proporciona l'atribut "disabled" manté el camp "discapacitats" ... com el de baix

<input type="text" value="This no és disabled" />

Recordeu que "qualsevol valor (o cap valor) de l'atribut amb discapacitat, el navegador es fan amb discapacitat". Per mantenir les coses en clar en la nostra ment W3C recomana que fem servir disabled = "disabled" en aquestes situacions.

Aquesta és la diferència, encara que quan s'utilitza aquest atribut en javascript ...

document.form.element.disabled = true; / / l'element es desactiva
document.form.element.disabled = false; / / l'element s'activarà

Els arguments anteriors també són aplicables a aquests atributs i elements:

• seleccionada (botó de la ràdio i la casella de verificació)
• seleccionats (opció)
• nowrap (td)

Google inicia un moviment de gent ràpida per descarregar IE6 ... Per usuaris molestant IE6 amb un POPUP en carregar la pàgina ... no pot ser una molt bona idea ... però com que és un desenvolupador d'interfície d'usuari, he de participar en aquest vagó de la banda ... un navegador menys perquè jo em preocupi ... Ho sento egoista que és! però he de incloure aquest estigui habilitat ... (TRY AQUESTA PÀGINA EN IE6) ...
Hey! i en la nota més brillant ... Veure és una mostra de el poder de JavaScript .... fins i tot pot fer caure un gegant (o un cop ho va ser)

Així que ... Ajuda lliurar al món de IE6, amb una línia de javascript!

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

Amb un altre navegador per tenir cura a partir de demà! (IE8 surt del seu futur Estat Beta) ... El seu IE6 temps molt alta per la seva mort a llarg Misericòrdia ... A causa unió fa la força de la caiguda de IE6

"IE6 és el nou Netscape 4. Els hacks necessaris per donar suport IE6 són cada vegada més com l'excés de càrrega. Igual que Netscape 4 en 2000, IE6 és percebut com frenant la web. "

Jeff Zeldman, guru de les normes

I mentrestant, per a aquells com jo que serà inundada amb trucades de trencar dissenys de CSS a Internet Explorer 8, aquí és el treball al voltant de vell / arreglar amb etiquetes meta (meta http-equiv = "X-UA-Compatible") podria intentar ...

Mal comportament IE8: CSS trencaments Disseny (Apuntar a una versió del navegador utilitzant Meta Tags en ​​IE8)

Aquí està un altre petit tros d'engany Javascript que havia de cavar al seu voltant perquè la situació ho commaned. En un dels meus llocs web, he tingut aquesta situació en la qual vaig haver de posar en pràctica "windows.onload" dues vegades. El primer que va venir al cap una experiència com la meva (he de dir honestament que, des que he estat utilitzant frameworks de JavaScript i les biblioteques, he forgotton a fer coses simples pel meu compte ... trist però cert), és el següent mètode ...

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

Em sap greu dir-ho, però, això funcionarà ... no vull parlar de la ciència execució de Javascript molt ... però d'acord a la meva experiència recent, només l'última funció (onloadfn3) malalts s'executa realment aconseguir.

En situacions normals, a diferència de la meva (que vaig a parlar una mica més tard) ... que podria fer un dels següents per executar funcions mutliple onload ....

O alguna cosa com això

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

Per la meva situació actual, no pot utilitzar qualsevol dels anteriors ...
Per què he de trucar dues vegades windows.onload, més que trucar a dues funcions dins d'una funció onload sol? Aquí és ràpid cop d'ull a la meva declaració del problema ...

"Els meus pàgines del lloc s'estructura com el tema de WordPress .... és a dir, hi ha un comú header.php i footer.php que s'inclou en totes les pàgines del lloc. Hi ha un implementaion funció onload al footer.php de fer algunes funcions onload comú. I hi ha algunes pàgines que necessiten una mica de la seva pròpia onload, a part de les realitzades per la funció onload comú. Si li assigno funció de trucada directament al controlador de window.onload, serà passar per sobre de les devolucions de trucada assignat prèviament en el footer.php "

.... S'entén el meu problema ?

Bé! hi ha poques solucions que vaig trobar. Tots ells són molt similars i sobretot implementions d'una solució donada per Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solució:

Només cal afegir el codi JavaScript per al lloc ...

 addLoadEvent funció (funció) {
     var oldonload = window.onload;
     if (typeof window.onload! = 'function') {
        window.onload = funció
     } Else {
        window.onload = function () {
            if (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

I trucada en lloc de l'habitual "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Codi per funcionar amb més càrrega de la pàgina *
 }); 

Els avantatges d'aquest fragment de codi ...
1. En primer lloc, que li permet tenir múltiples esdeveniments windows.onload, anomenat de diferents parts del seu codi, sense overridding la definició anterior
2. És molt discret. Es pot col · locar en un arxiu amb les seqüències d'ordres o d'altres en un arxiu separat.
3. Funciona fins i tot si window.onload ja ha estat establert.

Un altre tut ràpid. Aquí hi ha alguna cosa senzilla i agradable usant el poder de CSS ... però va concebre difícil (i segurament no era jo), per començar. Addició d'ombra, podria ser un tros de pastís per a molts de nosaltres, amb alguns d'edició d'imatges com Photoshop eines ANF focs artificials, etc
La raó per la qual, he optat per ombra l'ús de CSS és que, en general, mentre que la creació d'un disseny de pàgina / HTML d'una aplicació, els requisits de mantenir la iteració. El que vull dir és, en un lloc web existent amb moltes imatges, com les de mostrar la llista freinds o una galeria d'imatges, que serà difícil tornar a processar tota la càrrega de les imatges que ja havien estat descarregades per afegir o eliminar les ombres, perquè la matèria.
Així que si vostè ha fet una mica de visió de futur en crear el htmls per afegir aquestes divisions addicionals o en general la situació és que vostè té una lògica de bucle generació d'aquestes icones / thumbnails en XSL, PHP. Java o qualsevol altre llenguatge de programació / scripting, es pot afegir en qualsevol moment, llavors és només la qüestió de mostrar i amagar les ombres mitjançant la propietat CSS Display, com pels clients sempre canviants necessitats ... Jo no t'has fet aquest tipus de visió de futur abans d'això ... però han començat ara!

En el següent exemple, la imatge original és sense ombres i el dropshadows s'apliquen segons sigui necessari! A més, he anat una mica més, mitjançant l'ús dels trucs de la meva Tut anteriors (bien! aquests probablement són les més curtes varietat de tutorials, de manera que només es justifica que qualifica de "Tut" 's) sobre ús de la propietat CSS clip per mostrar només

Imatge original

CSS Resultats DropShadow

Veure demostració | SourceFiles Descarregar

Per què vull entendre això??? ... Humm!!

La majoria dels escriptors CSS d'acord que la propietat Clip CSS és probablement un dels més sense utilitzar les propietats CSS. Era tan real per a mi i era el més feliç de la negligència, fins que vaig començar a modificar la Mootools DOS comandament (Pin) de component Slider (amb indicador de la gamma) .

Hi va haver una bona suggeriment d'un dels usuaris dels components de modificar el component Slider amb imatges retallades backgroud (en contra d'una divisió d'ample variable) per indicar el rang de desplaçament. Així va arribar la meva hora d'entrar a la diversió, però sense noliejats (per a mi és clar) a les aigües de la propietat Clip CSS.

Bé! el difícil que pot ser? Gairebé res ... SI i NO. La sintaxi per utilitzar la propietat CSS clip és bastant vertical, però el significat / usuage és una mica croocked. Amb una memòria com la meva, cada vegada que s'asseuen a treballar en el guió de la meva lliscant ... he tokeep referint-se al ús d'aquesta propietat CLIP, per recordar-me a mi mateix la lògica que he creat en el meu guió .... PER TANT! creu que la ploma cap avall, amb l'esperança de recordar que el futur (i també per al benefici dels que sembla atordida per la propietat CSS Clip)

Què Clip CSS fer?

Clip és part del mòdul d'efectes visuals de CSS 2.1. En poques paraules, el seu treball consisteix a col · locar una finestra visible a la part superior d'un objecte que està sent tallat, per tant, retallada d'imatges i crear miniatures sense haver de crear arxius addicionals (ja he posat aquesta funció per a un millor aprofitament en el component Slider )

Mitjançant la propietat CSS clip, es pot crear una retallada amb la forma rect. Igual que moltes altres propietats CSS (com a farcit marge etc,), amb rect requereix quatre coordenades dalt, Dreta, Avall, Esquerra (DECISIÓ). La naturalesa croocked d'aquesta propietat reflecteix el moment en què mireu més de prop com es calcula clip de la regió de retallada, utilitzant aquestes quatre coordenades (envia el cervell en un sorteig per un temps). Ara, per confondre a la part inferior s'inicia des de la part superior, i el dret de part de l'esquerra. . Veus el que et vaig dir? .... Per tant aquest post ...

Aquesta petita confusió pot desaparèixer, amb aquesta explicació visual de la CSS Clip / rect propietat com de baix!!

CSS Requisits Clip

La tasca que hem iniciat és per retallar la imatge en miniatura següent en una imatge més quadrada que busquen (i també una imatge de gran angular)

Thumbnal original / imatge	Requisits per al clip de Sqaure Thumbmail

CSS Resultats Clip

Veure demostració | SourceFiles Descarregar

De vegades, per mantenir el pageweight baix ... hem dividit els nostres scripts en fragments ... Aquests fragments de Javascript es pot carregar com i quan sigui necessari (en un esdeveniment o en fer clic en un enllaç o botó, etc.)

Carregant Javascripts dinàmicament és simple i bastant senzill de la següent manera ...

= “text/javascript” > <script Type = "text / javascript">
funció loadNewScript (font) {
var s = document.createElement ('script');
s.setAttribute ('tipus', 'text / javascript');
s.setAttribute ('src', font);
document.body.appendChild (s);
}
</ Script>

i vostè pot tenir en el vincle següent trucada en qualsevol part del cos, o pot fer que aquest script "onload" del document en si ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A Href = "javascript: loadNewScript ('myDynamicScript.js');"> Càrrega del script dinàmic </ a>

o

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

Si vostè és una persona css, vostè sap que el dolor en aconseguir els dissenys de treball cross-browser. IE8 és un altre pal a la roda per als desenvolupadors de nosaltres. Anywaz! si es colpeja a aquest tema, com ho vaig fer ahir, en el seu perfecte estat de funcionament de CSS a Internet Explorer 7 (i anteriors) i Firefox de cop i volta va començar a llançar rebequeries en IE8, intenteu el següent ... S'assemblava molt bé per solucionar els meus problemes de moment ....

Utilitzant la declaració Meta, es pot especificar el motor de renderitzat que ens agradaria utilitzar IE8. Així que a força de IE8 per fer que Internet Explorer 7 ... Inseriu la següent metaetiqueta en la capçalera del seu document: -

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

Per defecte IE Meta seria la següent: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
el que faria IE8 representar la pàgina utilitzant la manera de les noves normes.

Si és necessari, aquesta sintaxi podria ser utilitzat per donar cabuda a altres navegadors de la següent manera:

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

MÉS sobre doctype:

SI vostè està encara familiaritzat amb el tipus d'animal que es diu "doctype" ... vet aquí una mica de lectura ràpida
Quins són DOCTYPE? Quines són les peculiaritats de navegador i la manera estricte?
Ajustament de la DOCTYPE en XSL

Per una anàlisi més profund coneixement sobre DOCTYPE, intent que visita aquests links ...
A List Apart: Soluciona el seu lloc amb el DOCTYPE Molt bé!
A List Apart: Més enllà de DOCTYPE: Estàndards web, compatibilitat, i IE8

Nota: Encara que molts de nosaltres HTML / CSS gent ha estat descuidant la importància de decleration DOCTYPE en els nostres documents, Configuració de la DOCTYPE correcte, sol ser la resposta a les qüestions de navegació més transversal.

Amb una varietat de carrusels per aquí, molts de Mootools així, encara em vaig decidir a escriure la meva pròpia classe Carrusel, per algunes bones raons
1. Volia una funció de localització (per ser capaç de saltar una diapositiva / pas en el carrusel).
2. Volien la llibertat amb la col · locació dels botons esquerre i dret / links, allà on em doni la gana.
3. Un major control sobre la Plaça de diapositives.

Me les vaig arreglar per crear un nou carrusel, amb les característiques anteriors de la següent manera ... ... Siéntase lliure de suggerir les modificacions que caldria!

El meu exemple s'assembla a aquest ... [ Veure demostració ]

Veure demostració | Descarregar Mootools carrusel Amb la versió 1.0 de paginació (Descarregat 1872 vegades)

1. Carrusel de paginació

Vostè pot afegir fàcilment la localització de la seva carrusel, simplement activant l'opció de paginació, que és Para't últim va passar en crear la instància de la MooCarousel de veritat (vull paginació) o fals (nose que volen de paginació).

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = nombre de diapositives, sss = mida de pas de diapositives

I per descomptat es pot canviar el look-n-feel d'aquests achors paginació al seu gust, modificant la seva CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
.... Carousel_paging actual, carousel_paging pàgina {outline: none; amplada: marge, # D8D8EB: 0 15px; height: 15px; line-height: 15px; text-align: center; display: block;:; surar a l'esquerra de fons 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging actual {background: # 4D4D9B; color: # FFFFFF;} ..

Bé! hi ha un petit problema, però, les àncores de paginació si s'estableix, llavors aconseguirà generat sempre després que el component de Carrusel. Jo volia fer-ho dinàmic també, però només per mantenir la seqüència de comandaments per a la bufa de proporcions, em vaig decidir a saltar.
Però vostè sap que una mica de Javascript, que podria modificar fàcilment el codi de generació de paginació en la classe MooCarousel per complaure a les seves necessitats.

2. Personalització de les icones d'esquerra i dreta

Pot canviar la ubicació, imatges o qualsevol propietat displat dels botons esquerre i dret, simplement per jugar amb el CSS. ser capaç de canviar la col · locació de la buttoms esquerra i dreta va ser la raó real per mi a la dreta de la meva classe carrusel.
Com que aquesta classe MooCarousel, accepta l'id d'aquests botons, vostè pot col · locar aquests botons en qualsevol lloc de la pàgina, si us plau ... no ha de ser en la jerarquia d'elements, com en el meu exemple.

var = new carousel1 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; position: relative; Ample: 23px; height: 20px; float: left; cursor: pointer;}

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

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

3. Personalització dels passos de diapositives

Què vull dir el meu PERSONALITZACIÓ PASSOS SLIDE?
La majoria dels carrusels de diapositives amb el ple de la finestra visible. Així que dir que hi havia quatre elements (com en el meu exemple anterior), es desplaçarà a tots els quatre elements. Amb aquest component del carrusel, es passa el nombre de diapositives i la mida del pas de la seva elecció.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = nombre de diapositives, diapositives c_sss = mida de pas

A més, en la meva exemple1 he Calcuta la mida del pas de diapositives, basada en la lògica que, ja ho sé nombre d'elements, l'amplada de cada element i els marges que s'han donat després de cada element en la meva CSS.

/ * Per gresca 1 * /

var c1_w = 92; l'article / / Ample de gresca

var c1_n = 10; Número / / Total dels elements d'orgia de comparació

var c1_pp = 4 / / Nombre de gresca de comparació Articles perpage

var c1_marginFactor = 51;

var = c1_sss c1_w c1_pp * / / sss = mida de pas de diapositives

c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0.5) / / ns = nombre de diapositives

c1_sss + = c1_marginFactor / / sss slide = mida del pas, 51 dels marges

Requisits: Mootools 01/02

Veure demostració | Descarregar Mootools carrusel Amb la versió 1.0 de paginació (Descarregat 1872 vegades)