Discussion :

[François Zeayon]

Bonjour.

Je débute actuellement un site web et j'ai choisi de m'appuyer sur Bootstrap pour sa mise en forme.
Je suis donc en cours de modification des fichiers html et CSS pour obtenir le design que je recherche et je me pose la question suivante : comment être sûr de ne pas dégrader les performances de bootstrap ou sa compatibilité et sa cohérence entre les différents navigateurs ?

Y a-t-il des jeux de test pour qualifier, ou au moins comparer, la version de bootstrap d'origine et ma version modifiée ?

Merci.

[NoSmoking]

Bonjour,
je dirais qu'il est préférable de ne pas modifier le fichier bootstrap.css et d'ajouter le tiens à la suite avec les corrections nécessaires

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mon_style.css">

[François Zeayon]

Bonjour.

Merci pour cette proposition mais je ne vois pas comment conserver les avantages de Bootstrap si j'en surcharge les éléments, même par un fichier supplémentaire.
A moins de ne pas avoir perçu l'intérêt de ta proposition, vis-à-vis de ma demande bien entendu, j'ai l'impression que le seul moyen d'être sûr que mon site web basé sur des css de Bootstrap modifiés fonctionne aussi bien qu'avec des css de Bootstrap originaux est de le vérifier par des tests.

Merci pour votre aide.

[darkstar123456]

Bonjour,

Je rejoins l'avis de noSmoking, c'est la méthode la plus efficace et rapide d'utiliser Bootstrap tout en l'adaptant à son site.
Vous pouvez d'ailleurs voir dans la doc Bootstrap que c'est ce qu'ils font :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!-- Bootstrap core CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
 
 
<!-- Documentation extras -->
<link href="../assets/css/docs.min.css" rel="stylesheet">

Si vous souhaitez aller plus loin, et coder votre CSS à la manière "programmation", vous pouvez utiliser les fichiers LESS et SASS de Bootstrap.

Quoi qu'il en soit, le CSS n'est visible que via un navigateur gérant les CSS (sur Lynx par exemple, pas de CSS). La seule façon de tester du CSS est de l'afficher dans un navigateur, pas en regardant son code source ! (sauf pour les erreurs de syntaxe évidemment ^^)

[François Zeayon]

Bonjour,

Je comprends très bien ce que vous dites et vous remercie de rappeler les bonnes ou différentes méthodes d'implémentation de fichier ou règles CSS.
Par contre, ma question est plutôt : si je souhaite modifier une règle définie par Bootstrap, laquelle est écrite de manière a être bien interprétée par tous les navigateurs, et que ma surcharge annule, dans le même temps, c'est gestion de compatibilité, j'aimerai savoir que mon implémentation induit des "régressions".

Une partie de la réponse se trouve donc dans ta dernière phrase, darkstar123456, mais cela me paraît peu déterministe si on le fait manuellement (tests à répéter systématiquement, vérification de chaque pixel dans chaque navigateur et résolution pour vérifier que rien n'est cassé, ...). En fait, s'il existait une capture d'écran de la mise en forme Bootstrap par défaut, dans les différents cas d'utilisation gérés (navigateurs, résolution, ...), ce sera presque idéal : une comparaison pourrait être effectuée pratiquement automatiquement.

Des idées dans ce sens ?
Merci !

[darkstar123456]

Théoriquement, il n'y a pas d'autres solutions. La preuve, il existe de nombreux sites qui permettent de tester son site sur plusieurs browsers.

Maintenant, il y a le CSS3 et la propriété "box-sizing", qui fait qu'on peut maintenant s'arranger pour que tous les navigateurs (récents) aient le même modèle de boite.
C'est cette propriété qu'utilise Bootstrap et qui assure un max de compatibilité avec les différents navigateurs.

Pour le reste, soit vous connaissez exactement les astuces des navigateurs, soit vous apprenez à les apprendre en les testant.

Je ne connais aucun développeur qui n'a pas au minimum Firefox, Chrome et IE installés sur sa machine... Je recommande également un Virtual Machine avec un MacOS afin de faire les tests. En effet, bien que Safari soit un Webkit comme Chrome, il y a souvent plein de subtilités (et une gestion abominable des cookies)

En résumé :
A la vue de votre question, vous me semblez peu expérimenté. Vous devrez donc apprendre les différences entre navigateurs, et donc tester ce que vous faites.
Il existe évidemment quelques outils pour générer des bouts de code compatibles avec un maximum de navigateur comme :
- http://css3please.com/
- http://border-radius.com/
- http://css3gen.com/box-shadow/
- http://cssarrowplease.com/

Comme vous pouvez le voir, il s'agit ici de choses très spécifiques du CSS3... pour d'autres éléments spécifiques aux navigateurs, suivant ce que vous cherchez à faire, il existe en général des articles, et Google est votre ami :p

[François Zeayon]

Merci pour tous ces conseils et liens.

Effectivement, je suis débutant mais, quelque soit le niveau de qualification, j'osais espérer que quelqu(es)'un(s) se soient attelés à faire un jeu de tests automatiques pour vérifier les différences de présentation entre un navigateur et un autre d'une même page.
Tant pis, je ferais donc comme tout le monde pour le moment.

Merci.