Est-il OK d'utiliser jQuery pour une conception Web réactive?

11

J'ai été chargé de mettre à jour un site pour le rendre réactif et apparaître correctement sur les téléphones intelligents. Malheureusement, le site dans sa forme actuelle n'est pas très facile à travailler - je ne peux pas simplement changer le CSS.

Est-il considéré comme mauvais de détecter la taille du navigateur et d'effectuer les modifications CSS avec jQuery?

Par exemple:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}
css mobile jquery optimization responsive-webdesign MeltingDog
la source
7
Vous devriez plutôt envisager d'utiliser les requêtes multimédias car c'est une norme recommandée par le W3C depuis juin 2012.
Zistoloen
Vous voulez changer les feuilles de style? Je pensais cela aussi, mais je devrais encore modifier beaucoup d'éléments
MeltingDog
Oui. Dans tous les cas, je pense que vous aurez beaucoup de changements CSS.
Zistoloen
2
La phrase "J'ai été chargé de mettre à jour un site pour le rendre réactif" ne doit pas être suivie de "Je ne peux pas simplement changer le CSS"
Francisco Presencia
4
tout a besoin de plus de jQuery ( Avertissement: ne prenez pas cela au sérieux )
Darkhogg

Réponses:

13

Sûr. De toute évidence, il serait préférable d'utiliser CSS seul, mais si vous ne le pouvez pas, utilisez ce que vous avez. Faites autant que vous le pouvez avec CSS et utilisez JS au besoin. Vous ne savez pas pourquoi vous ne pouvez pas modifier le CSS existant, mais vous pouvez ajouter une feuille de style avec JS.

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

Source: http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

puis devenez fou avec les requêtes CSS / médias.

Ou avec jQuery:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

J'ai fait des «skins» réactifs où certaines choses n'étaient tout simplement pas possibles sans changer le DOM. Si vous n'avez pas accès au HTML, la manipulation JS DOM est parfois la seule réponse.

EDIT:
Selon les exigences visuelles de votre version pour petit écran, vous pourriez être surpris de voir jusqu'où cet extrait CSS vous aidera à devenir «mobile friendly».

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

Si le développeur CSS d'origine aimait trop !importantet que vous ne pouvez pas accéder au HTML, vous pouvez utiliser jQuery / JS pour ajouter un ID au corps ou au conteneur de haut niveau et l'ajouter à votre sélecteur.

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }
Volonté
la source
D'après mon expérience, la conception réactive peut être réalisée avec uniquement des CSS. Dès que votre conception doit également devenir adaptative, vous avez probablement aussi besoin de Javascript. Gardez à l'esprit que vous souhaitez conserver le javascript aussi minimal que possible.
Marco
4

Je dirais d'abord essayer d'utiliser les requêtes multimédias. Une méthode que j'ai trouvée plus facile quand il s'agissait d'un design qui n'était à l'origine que pour le bureau était la suivante:

Commencez avec deux feuilles de style distinctes. Un pour la nouvelle conception réactive et l'autre pour l'ancienne version de bureau:

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

Tous les anciens styles peuvent être contenus dans desktop.css . Pendant ce temps, vous pouvez recommencer à zéro dans le mobile.css . Vous pouvez trouver que vous pouvez faire une belle mise en page sur une seule colonne dans ce CSS mobile qui fonctionne également pour les tablettes.

Cette approche vous permet de prendre un nouveau départ et vous pouvez créer un style spécifiquement pour les mobiles et les tablettes et ne pas laisser les styles de bureau passer à travers et remplacer les choses. Vous pouvez masquer / afficher / positionner des éléments comme requis uniquement pour les mobiles.

Si vous avez vraiment besoin de modifier le code du bureau pour le faire fonctionner avec le mobile et le bureau, vous pouvez refactoriser le balisage. Alternativement, si vous trouvez que vous ne pouvez pas refactoriser de manière réaliste le HTML pour les versions réactives et mobiles, vous pouvez mettre une classe sur le code du bureau, par exemple la classe "bureau" et utiliser CSS dans la version mobile pour le masquer. Ensuite, écrivez du nouveau HTML pour cette section et donnez-lui un class="mobile". Ensuite, stylisez- le en conséquence dans mobile.css et cachez-le dans desktop.css .

speedpeeder
la source
3

J'ai travaillé sur un site qui utilisait cette méthode et j'ai eu des problèmes avec la rotation de l'écran sur les appareils mobiles. Étant donné que JavaScript ne détectera qu'une seule fois au chargement de la page, si l'utilisateur fait pivoter l'appareil, il ne se développera pas sur toute la largeur comme il le fera avec les requêtes multimédias. Il était plus facile pour moi à l'époque de passer au CSS, mais peut-être qu'un expert JS saurait s'il existe un moyen de détecter un changement dans la largeur de la fenêtre d'affichage. Il semble qu'il devrait y avoir un moyen avec AJAX, mais je serais prêt à parier que tout ce que vous avez trouvé serait exagéré en termes de performances, comme megasteve le décrit.

Stéphanie
la source
2

La réactivité et «apparaître correctement sur les téléphones intelligents» sont des tâches complètement différentes.

  1. Vraisemblablement, la réactivité fait référence à l'élimination - dans la mesure du possible - des allers-retours supplémentaires vers le serveur. La vérification des erreurs, Ajax pour récupérer les données demandées et la manipulation dynamique du DOM sont les tâches qui améliorent généralement la réactivité. L'utilisation de JavaScript (ou framework JavaScript) est un moyen efficace de le faire. Au cours des dernières années, je suis passé de JavaScript à jQuery pour ces implémentations. Dans de nombreux cas, jQuery a une compatibilité de navigateur intégrée qui présente des avantages évidents. Les plugins pour datepicker, la saisie semi-automatique et les menus permettent de gagner des heures de développement.

Il ne devrait pas être la principale source de style. C'est le travail de CSS. Cependant, les deux peuvent être utilisés ensemble efficacement. Dans un exemple simple, le texte peut être stylé différemment selon les résultats d'une action. jQuery peut être utilisé pour changer la classe définie CSS. 

$('#result').removeClass('red').addClass('green');
  1. Il est tentant d'essayer de réutiliser une page standard pour mobile en modifiant dynamiquement le style. D'après mon expérience, cela fournit une solution insatisfaisante. Le CSS est complètement différent et des scripts côté client différents sont requis pour tirer parti des fonctionnalités mobiles. Ma préférence est de créer des pages HTML dédiées distinctes plutôt qu'une page nécessitant une logique pour sélectionner le style ou les fonctions à utiliser.
stephanie perry
la source
L'intervenant a mentionné la «conception Web réactive» ( en.wikipedia.org/wiki/Responsive_web_design ), qui fait référence à la conception pour différentes tailles et capacités d'écran. Bien que ce ne soit pas spécifique aux téléphones, cela a été un facteur énorme pour mettre cette technique au premier plan.
Jacob Hume
1

Nous avions l'habitude d'utiliser le framework css populaire 960.gs pour nos sites.

Nous voulions le rendre réactif.

Quelqu'un avait créé un plugin réactif basé sur JS pour les 960 gs , nous avons donc pensé hay pourquoi ne pas simplement l'utiliser car nous n'aurions pas à apporter de modifications aux modèles de site structurel.

Cela a fonctionné mais était lent dans la plupart des navigateurs, y compris les bons. Vous obtiendrez généralement un «flash de contenu non stylisé» qui varierait considérablement en fonction de la complexité de la page.

Malgré le fait que les solutions JS fonctionnent, elles ne sont pas idéales, les requêtes média CSS 3 sont le meilleur choix si possible. En fin de compte, nous avons juste refait nos modèles de site en utilisant Twitter Bootstrap, ce qui était très bien adapté à nos besoins.

Bien qu'il puisse être intéressant de prendre des raccourcis, cela s'avère souvent plus long / douloureux à long terme.

megasteve4
la source