Adaptation différent naviguateur
kinginventeur Le 18 septembre 2016 à 17:27 (Édité le 25 janvier 2019 à 17:52)
Alors j'ai un probléme avec les bordures , padding et autre.
Car enfete je code sous firefox mais lorsque je regarde mon site sur d'autre naviguateur ( chrome , explorer ) et bien les bordures sont buger et le padding aussi.
Comment faire dans mon css pour viser par exemple firefox tu fais comme sa >
google chrome comme sa >
explorer comme sa >
Car sur chrome je fais des bordures dynamique lorsqu'il est focus , donc les bordures ce met en radius et change de couleur mais l'ancienne bordure ( grise ) reste et on la vois en rectangle + la bordure en radius + l'autre couleur et sa fais vraiment moche :(
Merci de m'aider car c'est vraiment moche sous chrome et explorer ^^'
TheOldNoob Le 18 septembre 2016 à 23:20
Déjà, je t'invite a lire cette article d'Alsacreation sur les préfixes en CSS, c'est franchement très très chiant que les developpeur de navigateur n'arrive pas a s'accorder. Pour nous simple developpeur, c'est un calvaire.
Ensuite, pour ton problème, j'aimerais bien voir le css de ton bouton avec et sans :hover
kinginventeur Le 18 septembre 2016 à 23:52
.connexion_right .input /* bouton */
{
display: block;
width: 75px;
margin: 5px auto 0px auto;
background-color: #99AB17;
border: 1px solid black;
border-radius: 5px;
box-shadow: 2px 2px 2px #99AB17;
padding: 2px 5px;
transition: all 0.5s ease;
}
.connexion_right input[type="text"]
{
padding: 3px 5px;
transition: all 0.5s ease;
border: 1px solid grey;
border-radius: 5px;
background-color: lightgrey;
font-size: 15px;
}
.connexion_right input[type="password"]
{
padding: 3px 5px;
transition: all 0.5s ease;
border: 1px solid grey;
border-radius: 5px;
background-color: lightgrey;
font-size: 15px;
}
.inscription .inputinsc /* Input type password et text */
{
background-color: lightgrey;
border: 1px solid grey;
padding: 3px 0px 3px 5px;
transition: all 0.5s ease;
border-radius: 5px;
font-size: 16px;
}
.connexion_right .input:hover
{
cursor:pointer;
background-color: #BE4607;
box-shadow: 2px 2px 2px #BE4607;
color: white;
border-radius: 8px;
}
.connexion_right input[type="text"]:focus
{
background-color:#BE4607;
border: 1px solid grey;
color: white;
border-radius: 8px;
}
.connexion_right input[type="password"]:focus
{
background-color:#BE4607;
border: 1px solid grey;
color: white;
border-radius: 8px;
}
.inscription input[type="text"]:focus
{
border-radius: 8px;
border: 2px solid green;
}
.inscription input[type="password"]:focus
{
border-radius: 8px;
border: 2px solid green;
}
kinginventeur Le 18 septembre 2016 à 23:56
kinginventeur Le 19 septembre 2016 à 01:10
TheOldNoob Le 19 septembre 2016 à 19:50
Je sais pas si il y a une solution pour ça, j'ai testé ton css sur les deux navigateur et j'arrive pas a retirer l'affichage du input derrière le hover.
Quand je developpe le front, je fait toujours des test sur chrome, firefoxe, sur deux ecran différent (un 23" et un 17") ainsi que sur ma tablette et mon smartphone. Ainsi je vois le coté responsive du site et si il s'adapte bien partout.
kinginventeur Le 19 septembre 2016 à 20:24
TheOldNoob Le 19 septembre 2016 à 20:35
Tu trouvera toute les infos ici :
http://www.supinfo.com/articles/single/806-adapter-son-site-aux-differents-navigateurs
kinginventeur Le 19 septembre 2016 à 21:32
Tu peux me préciser ce que je dois faire avec normalize.css , et styles.css ? Les manip a faire car je comprend pas bien le code qui est dans normalize.css 😭
TheOldNoob Le 19 septembre 2016 à 21:51
Normalize, tu n'y touche pas, il remet a zero le navigateur.
Après, a toi de jouer avec ton css dans styles.css
Je suis pas certains que ça regles ton problèmes, mais très peu de gens reset leur css avant de commencé a codé
kinginventeur Le 19 septembre 2016 à 22:10
body{
margin: 0px;
padding: 0px;
background-color: black;
}
input{
display: block;
width: 300px;
height: 35px;
margin: 50px auto 0px auto;
border: 3px solid red;
border-radius: 50px;
-moz-border-radius: 3px;
background-color: lightgrey;
}
TheOldNoob Le 20 septembre 2016 à 08:02
-moz-border-radius: 3px;Sachant que de nos jour, le border-radius est très bien gérer par firefoxe
kinginventeur Le 20 septembre 2016 à 21:39
Quand je met juste -moz-border-radius ben il n'y a pas de radius ... Comme si le code n'existais pas . Pourquoi ?
Quand je met -webkit-border-radius: 3px; il ce passe rien la aussi , pourquoi ?
TheOldNoob Le 20 septembre 2016 à 22:18
Tu peu testé chaque propriétés via le site http://caniuse.com/ qui doit devenir une référence pour tous codeur orienté front.
Sinon, j'ai trouvé se pdf fait par le cinéspace de beauvais (me demande pas pourquoi) qui est pas mal pour t'expliquer les hacks des feuilles de styles en fonction du navigateur.
http://www.cinespace-beauvais.com/fichier/pdf/feuilles-de-style-conditionnelles.pdf
Bonne lecture 😀
kinginventeur Le 20 septembre 2016 à 22:47
@media screen and (-webkit-min-device-pixel-ratio:0) {
.connexion_right input[type="text"] { padding: 4px 6px; width: 160px;} /* Seulement Safari et Chrome */
}
Car lorsque je met focus et je met border-radius: none;
Ben il y a toujours des border radius :(
kinginventeur Le 20 septembre 2016 à 23:19
border-radius: 0px;
TheOldNoob Le 20 septembre 2016 à 23:19
kinginventeur Le 20 septembre 2016 à 23:20
kinginventeur Le 20 septembre 2016 à 23:21
@media screen and (-webkit-min-device-pixel-ratio:0) { .connexion_right input[type="text"] { padding: 4px 6px; width: 160px;} /* Seulement Safari et Chrome */ }Ce code je les trouver sur le lien que tu m'as envoyer voyons ^^ http://www.cinespace-beauvais.com/fichier/pdf/feuilles-de-style-conditionnelles.pdf
Et sa fonctionne niquel ^^
TheOldNoob Le 20 septembre 2016 à 23:28
L'important c'est que ça fonctionne. Pour ton problème, c'est peut-être juste lié a chrome qui gère mal les inputs.
Comme chaque navigateur gère tout chacun de son coté, c'est un peu le bordel... Et je suis comme toi, je n'utilise que firefoxe, Chrome c'est moyen.
kinginventeur Le 20 septembre 2016 à 23:31
TheOldNoob Le 20 septembre 2016 à 23:46
que tu trouvera ici : http://www.zdnet.fr/actualites/chiffres-cles-les-navigateurs-internet-39381322.htm
IL faut en priorité codé pour les navigateur chrome, qui represente la grosse majorité des utilisateurs.
Profil introuvable Le 20 septembre 2016 à 23:55 (Édité le 20 septembre 2016 à 23:57)
J'ai toujours coder les site web sur Internet Explorer, même avec l'apparition de Chrome, Firefox, Opera, Safari, Edge...etc. Je continue toujours à coder sur IE car je vais vous dire pourquoi :
J'ai fait la mauvaise expérience de coder sur un autre navigateur tel que Firefox ou Chrome... Mon 1er problème était les images... Lorsque je téléchargeais une image sur internet, elle avait comme extension.png et j'ai changer l'extension en .jpeg et je l'ai mis dans le code image.jpeg, résultats : tout les navigateurs affichaient l'image sauf IE car IE refusent que l'on modifie les extensions d'images... Et depuis que j'ai remis l'extension originale de l'image, c'est-à-dire .png et aussi dans le code image.png, IE l'affiche car c'est l'extension originale de l'image et c'est pour cela que maintenant j'utilise toujours IE pour coder des sites web... Puisque c'est grâce a IE que je saurais ce qui s'affichera exactement sur les autres navigateurs...
