web-dev-qa-db-fra.com

Est-il acceptable d’utiliser jQuery pour une conception Web réactive?

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 à utiliser - je ne peux pas simplement changer le CSS.

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

Par exemple.:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}
cssmobilejqueryoptimizationresponsive-webdesign
11
MeltingDog

Sûr. De toute évidence, il serait préférable d’utiliser uniquement le CSS, mais si vous ne le pouvez pas, utilisez ce que vous avez. Faites autant que possible 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 va fou avec les requêtes CSS/media.

Ou avec jQuery:

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

J'ai créé des "skins" sensibles dans lesquels il était impossible d'effectuer certaines tâches sans changer le DOM. Si vous n'avez pas accès au HTML, la manipulation du DOM DOM JS est parfois la seule réponse.

EDIT:
En fonction des exigences visuelles de votre version sur petit écran, vous serez peut-être surpris de voir à quel point cet extrait de code CSS vous amènera à "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 était trop friand de !important et que vous ne parveniez pas à lire le code HTML, vous pouvez utiliser jQuery/JS pour ajouter un ID au corps ou au conteneur de niveau supérieur 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; 
        ...
   }
13
Will

Je dirais d'essayer d'abord d'utiliser les requêtes des médias. Une méthode que j’ai trouvée plus facile pour traiter un dessin qui était à l’origine uniquement pour le bureau était la suivante:

Commencez avec deux feuilles de style distinctes. Un pour le nouveau design réactif 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 le desktop.css. En attendant, vous pouvez commencer à partir de zéro dans le mobile.css. Vous constaterez peut-être que vous pouvez créer une présentation Nice à 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 styler spécifiquement pour les téléphones mobiles et les tablettes sans avoir à gérer les styles de bureau. Vous pouvez masquer/afficher/positionner des éléments selon vos besoins uniquement pour les appareils mobiles.

Si vous avez vraiment besoin de modifier le code du bureau pour le faire fonctionner avec mobile et le bureau, vous pouvez refactoriser le balisage. Si vous ne parvenez pas à refactoriser le code HTML de manière réaliste pour les versions réactive et mobile, vous pouvez également ajouter une classe au code du bureau, par exemple. classe "desktop" et utilisez CSS dans la version mobile pour le masquer. Ensuite, écrivez un nouveau code HTML pour cette section et attribuez-lui un class="mobile". Ensuite, personnalisez-le dans mobile.css et masquez-le dans desktop.css.

4
lightspeeder

J'ai travaillé sur un site utilisant cette méthode et j'ai eu des problèmes de rotation d'écran sur les appareils mobiles. Etant donné que JavaScript ne détectera qu'une seule fois lors du chargement de la page, si l'utilisateur fait pivoter le périphérique, sa largeur ne sera pas étendue de la même manière que pour les requêtes multimédias. À l'époque, c'était plus facile pour moi de passer à CSS, mais un expert en JS pourrait peut-être savoir s'il existe un moyen de détecter un changement de largeur de la fenêtre. Il semble qu'il devrait y avoir un moyen d'utiliser AJAX, mais je serais prêt à parier que tout ce que vous avez trouvé serait excessif en ce qui concerne les performances, comme me dit Megasteve.

3
stephanie

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é consiste à éliminer - dans la mesure du possible - les 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 d'un cadre 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, autocomplete et menus économisent des heures de développement.

Cela 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 en fonction des résultats de certaines actions. jQuery peut être utilisé pour changer la classe définie par 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. Mon expérience est que cela fournit une solution peu satisfaisante. Le CSS est complètement différent et un script côté client différent est 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.
2
stephanie perry

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

Nous voulions le rendre réactif.

Quelqu'un avait créé un plugin responsive basé sur JS pour les 960 gs , alors nous avons pensé: pourquoi ne pas simplement l'utiliser car nous n'aurions pas à modifier les 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 "contenu de contenu non stylé" qui varie considérablement en fonction de la complexité de la page.

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

Même s’il est peut-être intéressant de prendre des raccourcis, cela prend souvent plus de temps et est plus pénible à long terme.

1
megasteve4