Articles taggés avec 'Opéra'

jQuery: ronds bords sur les images se chevauchent

En raison de la prestation différente selon les navigateurs, Microsoft Internet Explorer certainement voir dans cet esprit, nous devons toujours avoir recours à des astuces pour appliquer des effets spéciaux qui devraient maintenant être une norme. Le prix-discuté des bords arrondis sont un exemple classique de «catastrophe» produite par l'incapacité totale de faire quelques normes sérieuses sur les pages rendent HTML / CSS. , etc… Il existe de nombreuses solutions qui permettent au réseau pour obtenir des "effets" (effets qui présentent comme étant exemptées à partir des coins arrondis HTML, des effets d'ombre, des reflets, etc ...) avec des taches sur les feuilles de styles, des astuces spéciales en utilisant div greffé, les bibliothèques Javascript, utilisation de canvas , etc ...
Sur un purement pédagogique, je vais illustrer autre technique (cross-browser) à appliquer aux bords arrondis des images:

Démo et la source

En savoir plus ...

CSS3: quelqu'un at-il vu le navigateur Internet Explorer?

Je fais juste pas ...

1
2
3
4
5
6
7
8
9
{P
/ * Coins arrondis * /
; /* CSS 3 */ border-radius: 9px; / * CSS 3 * /
; /* Opera */ -O-border-radius: 9px; / * Opera * /
; /* iCab */ -ICab-border-radius: 9px; / * iCab * /
; /* Konqueror */ -Khtml-border-radius: 9px; / * Konqueror * /
; /* Firefox */ -Moz-border-radius: 9px; / * Firefox * /
; /* Safari */ -Webkit-border-radius: 9px; / * Safari * /
}

En savoir plus ...

jQuery contre tout le monde: un point de repère avec 5 navigateur

image Un bon développeur n'a aucun problème à passer d'un langage de programmation à l'autre. Le choix de se concentrer sur une langue, le cadre particulier ou environnement de développement, est plus dicté par la disponibilité de temps et le type de travail qui se fait. Cependant, un facteur important qui peut influer sur le choix de «cadre», telle est la sympathie et l'affection que peut mûrir au fil du temps.
Plus précisément, je voulais analyser quelques-uns - pas tous - des cadres Javascript disponibles aujourd'hui, parce que même «conseillé» de prendre un coup d'oeil particulier à jQuery .
Les créateurs de mootools (l'un des principaux frameworks JavaScript) ont mis à disposition un outil pour exécuter un test de vitesse et de la validité de cinq frameworks JavaScript bien connus: SlickSpeed ​​. Ce test, le résultat n'est pas du tout évident, est important que le travail sur les cadres des clients Javascript secondaires, qui sont effectuées par notre navigateur. C'est précisément pour cette raison que certains trouvent Safari plus rapide que Internet Explorer ou Google Chrome plus rapide que Firefox . Toutefois, cela dépend souvent du type de page que vous consultez. En effet, il peut arriver qu'un site en particulier est vraiment "rapide" lorsqu'il est affiché dans Safari, mais cela ne signifie pas que «tous les sites" sera plus rapide avec Safari! Évidemment, cela est vrai pour n'importe quel autre navigateur.

L'indice de référence

Dans les tests que j'ai fait avec SlickSpeed ​​j'ai comparé les navigateurs disponibles sur ma machine (Windows Vista 64 bits Utilmate - Intel Core 2 Quad 2,4 GHz avec 8 Go de RAM).
Malheureusement, les tests ne sont pas en mesure de fonctionner avec Internet Explorer 7, que la voiture s'est écrasé, allant même hors d'échelle avec les résultats! Encore une fois, félicitations Microsoft.
Je crercato de maintenir le même statut de l'ordinateur au cours de l'essai, l'ouverture du navigateur, et non individuellement par l'envoi d'aucun autre processus en cours d'exécution.

Remarque: Si vous avez envie vous aussi exécuter une ou plusieurs de ces tests, vous pouvez commenter sur ce post en cas de résultats "étranges" et différent.

image

Google Chrome a été très rapide, avec une valeur de 68 (moyenne) dans l'essai avec jQuery . Le plus lent, cependant, était Flock , même s'il vient de la même «mère» de Mozilla. Cette mauvaise performance de Flock est vraiment curieux que ses coupe les réseaux sociaux, car c'est précisément le Web social Network 2.0 pour profiter des nombreux frameworks JavaScript disponibles, de manière à fournir une expérience de navigation réellement innovante et de l'interaction.
Étonnamment bat FireFox et Opera dispose également d'un «joli petit, même obtenir un 74 dans l'exercice de Dojo ! FireFox et Safari, après tout, sont semblables, avec Safari plus rapide dans les essais avec Mootools et jQuery.

Quel cadre choisir?

Si nous ne nous soucions de tester la rapidité d'exécution et nous ne nous soucions dimesion en kilo-octets de le même cadre, la réponse peut être "ce que vous voulez" ou, si vous voulez, "ce que vous savez mieux ou est plus harmonieuse avec votre style de programmation. "
En fin de compte, ces cadres se penchera tout un peu "(voir par exemple l'utilisation de $), en dépit de quelques différences importantes et substantielles qui peuvent sauter aux yeux d'un expert ou vraiment poussé à l'utilisation d'une bibliothèque particulière. En principe, en fait, tout ce qui peut être fait avec jQuery, par exemple, vous pouvez faire bien avec mootools ou prototype! Si jQuery a une syntaxe très compact, comme toutes les méthodes retournent toujours la base objet jQuery, créant ainsi d'interminables rangées de oggetto.metodo().metodo().metodo()... a dit que ce n'est pas du tout coûte une force, en particulier pour ceux qui auront à déboguer!
Bibliothèques comme prototype.js péché, peut-être en l'absence d'effets, même simples, ce qui oblige le développeur à mettre en œuvre, une entreprise dérivée scriptaculous.js , lourds et éloignées de la première bibliothèque choix.

Un exemple

Précisément pour cette raison, par exemple, m'a amené à remplacer le prototype couplé / scriptaculous avec jQuery pour créer des panneaux interactifs ou undolog.com animation ici dans la barre latérale. En effet, même en utilisant l'API Google pour importer des bibliothèques, est un chargement de déchets toutes les bibliothèques et scriptaculous pour un slideUp slideDown. Pour plus d'informations et un exemple, voici le code Javascript comme il a été couplé avec le prototype / scriptaculous:

1
2
3
4
5
6
7
8
9
10
11
12
13
/ / Prototype / Scriptaculous
) . each ( $ $ ('H2.dropdown'). Chaque (
element ) { fonction (element) {
= "pointer" ; .. élément de style curseur = "pointeur";
'click' , élément. observer («clic»,
event ) { function (event) {
this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. this. next () le style d'affichage == "") Effet nouvelle BlindUp (this. next (), {duration: 0.5});.
Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; Effet chose de nouveau BlindDown (this. next (), {duration: 0.3}).;
event ) ; . Événement Stop (événement);
}
)
}
);

et il est maintenant avec jQuery:

1
2
3
4
5
6
7
8
9
10
/ / JQuery
) . each ( $ ('H2.dropdown'). Chaque (
i ) { fonction (s) {
) . css ( 'cursor' , 'pointer' ) . click ( $ (Ce). Css («curseur», «pointeur»). Cliquez sur (
la fonction () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) suivante () est (': hidden')) $ (this) next () slideDown (); else $ (this) next () slideUp ();....
}
);
}
);

Dans l'ensemble, un peu plus près, je ne crois pas qu'il existe une grande différence! Mais comme je l'ai déjà dit ... la question est «bien» de goût personnel.

En savoir plus ...

Firebug Lite: Firebug pour IE, Opera et Safari

Utilisation de Firebug Lite . vous pouvez utiliser une version simplifiée de la note sur l'extension pour les navigateurs FireFox Microsoft Exploer Internet, Opera et Apple Safari Firebug Lite peut être utilisé de deux manières: comme un appel ou une bibliothèque Marquer déconnecté

Marquer les modes

L'ajout de cette «adresse spéciale" Firebug Lite à nos signets (faites glisser le lien dans mes favoris) - le code est le suivant:

1

Vous pouvez activer Firebug Lite sur n'importe quel site Web à partir de n'importe quel navigateur. C'est peut-être l'option la plus attrayante, même si les fonctions sont très limitées.

Hors ligne

Par ailleurs, si nous développons un site Web, vous pouvez télécharger un JavaScript et l'installer sur notre site Web! De cette façon nous pouvons utiliser Firebug Lite , même sans connexion Internet et localement.

Firebug Lite est un moyen de compenser le manque de cette extension à d'autres navigateurs, mais j'étais lent et très limité, en particulier dans les CSS! Comme ils le disent, mieux que rien ...

En savoir plus ...

Fabriqué dans le redimensionnement de l'image sur le navigateur

En principe, lorsque vous insérez une image dans un document HTML doit utiliser sa taille d'origine. Toutefois, le TAG IMG vous permet de forcer la largeur (largeur) et la hauteur (la hauteur) de toute image, indipendemente de sa taille originale. Cette conversion est effectuée - bien sûr - à partir du navigateur.
Utilisez le format original d'une image est bonne, bien que dans certains cas conduit à une double travail pour le concepteur Web et / ou moteurs dynamiques (tels que CMS ou des bibliothèques de manipulation graphiques) sur le serveur Web. Un diaporama classique, par exemple, comme une règle afficher l'aperçu ou de la vignette (images de taille réduite) montrent que si vous sélectionnez l'image originale plus grande.

En savoir plus ...

Guerre des navigateurs: la guerre continue?

Un Sunnyvale, en Californie, regroupe Yahoo à Silicon Valley Webbuilder Shaver de Mozilla Mike, Chris Wilson, l'équipe IE de Microsoft, et Lie d'Opera Hoon, afin de discuter sur le courant était la guerre éternelle entre les navigateurs.

Être souligné sont les mots de Mike Shaver de Mozilla:

Ne cherchez pas à le W3C pour l'avenir

Et la critique d'Apple qui ne fréquentent pas:

Ils ont refusé d'envoyer quelqu'un dire que "nous sommes en train d'écrire le logiciel."

C'est, entre autres choses, est à 10 miles de l'endroit où la réunion a eu lieu!

En savoir plus ...

browsershots.org: sortie navigateur multiples

Voici la réponse à des incompatibilités dramatiques avec les différents navigateurs actuellement disponibles. Browsershots.org est un service - gratuit et open source pour l'instant - qui fournit un moyen simple de vérifier si un site est affiché de la même manière sur les différentes plates-formes et navigateurs différents.

Merci à un petit serveur de la ferme d'origine, les auteurs de ce service utile de fournir la sortie vidéo des écrans générés par votre site, afin que vous puissiez vérifier l'exactitude de l'interprétation HTML / CSS sur des machines différentes et le navigateur: PLD Linux 2.0 ( Ac), Windows 2003 (serveur), Windows NT 5.1 (XP), Mac OS X 10.4 (Tiger) et d'autres.

browsershot-serverform

Le site est très bien entretenu, avec beaucoup de wiki de la documentation, la source, la feuille de route et un calendrier. . Vous pouvez également consulter les dernières captures d'écran, la file d'attente sur le statut des processus et l'état des usines. La plaie seulement, mais surmontable, est le temps nécessaire pour la génération de capture d'écran, un peu "lent! Cependant, il est d'une grande aide pour le développeur Web pour vérifier l'exactitude de leur travail, sans avoir à installer n'importe quel navigateur et / ou des machines virtuelles de coexister - par exemple - Internet Explorer 6 et 7. Pratiquement tous les navigateurs sont pris en charge par Firefox à Safari. Intéressante est la possibilité de verifcare IE6 et IE7, avec les versions 5.01 et 5.5.
Well done!

En savoir plus ...

Internet Explorer 7 et Opera: Un monde à part

Conitnua d'étonner la différence totale de rendement entre les différents navigateurs sur le marché. IE7 est la PNG (8-bits ou 24) de façon différente à partir de Firefox. Même Opera n'est pas exempt de quelque événement étrange à ce sujet. En particulier, le format PNG utilisé comme fond d'écran sont faites différemment que IE7, Opera et Firefox. C'est ce que réalise le meilleur de tous, et à cet égard, il est temps de nommer navigateur "siècle"! Félicitations à l'équipe de développement.

IE7 crée un bel effet de cisaillement sur une image PNG utilisé comme arrière-plan dans repeat-x. Si vous essayez de créer une image de 200 × 200 pixels avec un dégradé du noir (0 × 000000) au gris (0xEEEEEE) verticalement et placé dans le corps dans le CSS comme une répétition orizzonale fond (repeat-x), réglage de la fond couleur de la carrosserie 0xEEEEEE - c.-à-la fin de la pente, vous remarquerez que seul FireFox, il est parfait détachement, IE7 et Opera montrent un effet coupe sympa (mais un peu différent!): dans la pratique, nous voyons la fin de notre image 200 × 200 et le début de l'arrière-plan à la plaque de couleur.

Une manière de résoudre ce problème est de sauver notre image au format GIF ...

Mais les PNJ ne sont pas pris en charge par IE7?

En savoir plus ...


Arrêtez SOPA