Comment la ligne traditionnelle « HTML est seulement pour le contenu » de la pensée gérer la mise en forme dynamique?

StackOverflow https://stackoverflow.com/questions/719853

Question

Pour si longtemps, je l'ai lu et compris les vérités suivantes concernant le développement web:

  1. HTML est pour le contenu
  2. CSS est pour la présentation
  3. JavaScript est un comportement.

Ceci est normalement tout beau et bon, et je trouve que lorsque je suis strictement ces directives et utiliser .css externe et les fichiers .js, il fait tout mon site beaucoup plus facile à gérer. Cependant, je pense avoir trouvé une situation qui brise cette ligne de pensée.

J'ai un système de forums personnalisés que je l'ai construit pour un de mes sites. En plus de la mise en forme habituelle d'un tel système (liens, images, italique gras et souligné, etc.) J'ai permis à mes utilisateurs de définir la mise en forme de leur texte, y compris la couleur, la famille de polices, et la taille. Tout cela est enregistré dans la base de données par des messages du forum que le formatage du code, puis traduit au code HTML correspondant lorsque la page est affichée. (Un peu inefficace, techniquement je devrais traduire avant d'enregistrer, mais de cette façon, je peux travailler sur le vivre système.)

En raison de la nature de ce et d'autres systèmes similaires, je finis avec beaucoup de balises flottantes autour du code HTML résultant, que je crois que je officieusement dépréciée suis censé être en utilisant le CSS pour le formatage. Ce casse les règles un et deux, qui stipulent que HTML ne doit pas contenir des informations de formatage, préférant que ces informations soient situé dans le document CSS à la place.

Est-il possible de réaliser la mise en forme dynamique CSS sans inclure cette information dans le balisage? Est-il en vaut la peine? Ou, compte tenu des limites du bon code implicite, un I limiter ce que mes utilisateurs peuvent faire afin de suivre la « bonne » façon de formater mon code?

Était-ce utile?

La solution

Il est normal d'utiliser l'attribut style pour les éléments: 

This is <span style="color: red;">red text</span>.

Si les utilisateurs sont limités à certaines options, vous pouvez utiliser classes: 

This is <span class="red">red text</span>.

Assurez-vous d'utiliser des éléments HTML sémantique: 

This is <strong>strong and <em class="blue">emphasized</em></strong>
text with a <a href="http://www.google.com" rel="external">link</a>.

éléments sémantiques communs et leurs termes de l'espace utilisateur:

  • <p> (paragraphes)
  • <strong> (gras)
  • <em> (italique)
  • <blockquote> (guillemets)
  • <ul> et <ol> avec <li> (listes)
    • Plus ...

Probablement moins fréquents dans les messages du forum, mais encore des éléments sémantiques utilisables:

  • <h1>, <h2>, etc. (rubriques, assurez-vous de commencer à une valeur pour que votre page est logique)
  • <del>, et, dans une moindre mesure, <ins> (barré)
  • <sup> et <sub> (exposant et indice, respectivement)
  • <dl> avec <dt> et <dd> (liste de paires)
  • <address> (coordonnées)
  • En savoir plus ...

Autres conseils

Ceci est un peu délicat. Je pense à ce que vous voulez vraiment pour permettre aux visiteurs de le faire. couleurs arbitraires et polices? Cela semble plutôt inutile. Accent, rubriques, des liens et des images? Bien que vous pouvez gérer assez facilement en limitant à ces balises / en utilisant un balisage wikitexte / forumtext qui ne fournit que ces caractéristiques.

Vous pouvez construire dynamiquement une feuille de style en ligne dans la tête de la page html fournie aux utilisateurs. Mettez dans la tête de la page et permet de cibler les éléments configurables par l'utilisateur.

Sinon, il y a l'idée d'utiliser des feuilles de style externes qui comportent des ajustements les plus courants, mais il y aurait des centaines d'entre eux pour rendre compte de toutes les alternatives possibles. Si vous utilisez ce que vous auriez besoin d'une feuille de style externe pour une taille de police spécifique, la couleur et ainsi de suite, et un lien dynamique vers ceux de l'en-tête. Comme pour toute feuille de style externe. Bien que ce soit presque insupportablement complexe pour permettre.

La première option fonctionnerait bien si.

Par exemple: 

<STYLE>
    h1,h2,h3,h4 {font-family: Helvetica, Calibri;}
    p    {font-size: 1.2em;    // Populate all this with values from the Db.
         font-weight: bold;
         }
    a    {text-decoration: underline;
         color: #f00;
         }
</STYLE>

En outre, il vient à moi que vous pourriez probablement créer une feuille de style à appliquer par utilisateur les aspects configurables. Utilisez 

<link href="/css/defaultstylesheet.css" type="text/css" rel="stylesheet" media="all" />
<link href="/css/user1245configured.css" type="text/css" rel="stylesheet" media="all" />
<!-- clearly the second is a stylesheet created for 'user 1245'. -->

Le bonus de cette approche est qu'elle permet la mise en cache de la feuille de style par le navigateur. Bien qu'il pourrait encombrer probablement le dossier css, sauf si vous avez chemins d'utilisateur spécifiques à la feuille d'utilisateur? Wow, cela pourrait devenir complexe ...:)

Ceci est une situation intéressante parce que vous pouvez avoir un nombre infini de styles différents, en fonction des goûts et leurs propres styles personnels de vos utilisateurs.

Il y a quelques choses que vous pouvez être faire pour gérer cette situation de manière efficace. Probablement le plus simple serait d'utiliser simplement des substitutions de style: 

<p style="color: blue; font-size: 10pt;">Lorem Ipsum</p>

Ceci est rapide et facile. Et rappelez-vous, c'est ce que le style sont là overrides pour. Mais comme vous l'avez dit, cela ne correspond pas bien avec ce paradigme de séparation présentation du contenu. Pour les séparer un peu plus, vous pouvez construire des informations CSS à la page charge, puis l'insérer dans la balise <head> de votre code HTML. Cela permet de maintenir toujours le HTML et le CSS un peu différent, même si vous n'êtes pas techniquement les sepating.

Votre autre option serait de construire le CSS puis sortie qui dans un fichier. Cependant, cela ne serait pas efficace (à mon avis). Si vous deviez, sur chaque chargement de page, construire un nouveau fichier CSS qui prend en compte les préférences uniques de vos utilisateurs, ce serait la défaite en quelque sorte le but. C'est la même chose que la deuxième option, en utilisant la balise <head>, vous êtes juste faire paraître séparé. Même si vous avez utilisé des techniques telles que la mise en cache pour tenter de limiter la fréquence à laquelle vous devez construire un fichier CSS, sera la fin justifie vraiment les moyens?

est un sujet complètement subjective et vous devriez, à la fin, choisissez ce que vous êtes plus à l'aise.

Je ne sais pas quel cadre ou même langue que vous utilisez, mais par exemple Django utilise un certain langage de template pour représenter sorte de la sortie étant HTML. Je pense qu'une bonne solution serait d'utiliser simplement un autre « modèle » en fonction de ce que l'utilisateur a choisi. De cette façon, vous n'auriez pas se soucier de briser les « règles » ou d'avoir un tas de balises essentiellement inutilisées flottant dans les DOM.

À moins que je complètement mal compris ...!

La meilleure façon de gérer ce qui est probablement d'émettre CSS dynamique lorsque les pages sont générées, en fonction des paramètres de l'utilisateur. Ensuite, tout est en train de faire le travail qu'il est censé faire et le serveur est en train de faire le travail de convertir les paramètres de l'utilisateur dans le CSS approprié.

Avec le CSS faire ce travail, vous pouvez utiliser des attributs appropriés dans le code HTML (et de id name et class et ainsi de suite) et émettre CSS qui forme proprement tout comme vous le souhaitez.

Tenez compte des avantages par rapport aux coûts avant de faire quoi que ce soit. Ce qui est en fait de mal à votre code en ce moment? soupe Tag et contenu / présentation combinée doit être évitée non pas parce qu'il fait un mauvais site, mais parce qu'il est difficile de maintenir. Si votre code HTML / CSS est généré, qui se soucie de ce que la sortie est? Si ce que vous avez travaille maintenant, puis de s'y tenir.

Je suppose que vous ne permettez une liste blanche limité d'options de sécurité, et donc analyser le code HTML de l'utilisateur déjà.

Lors du rendu HTML que vous pouvez convertir chaque déclaration de style à une classe: 

<span style="font-family: SansSerif; font-size: 18px;">Hello</span>

Pour: 

<span class="SansSerif"><span class="size_18px">Hello</span></span>

Laborieux pour générer (et maintenir) la liste. Cependant, vous devez vous inquiétez pas une classe pour chaque combinaison, ce qui est bien sûr votre problème principal.

Il a également l'avantage supplémentaire de sécurité en tant que CSS de l'utilisateur est moins susceptible de passer à travers votre filtre comme il est tout remplacé, et cela devrait également assurer tous les CSS est valide.

  

J'ai permis à mes utilisateurs de définir la   la mise en forme de leur texte, y compris   la couleur, la famille de polices, et la taille. Tous   ceci est enregistré dans la base de données par de forum   messages sous forme de code de formatage, puis   traduit le code HTML correspondant   lorsque la page est affichée.

Alors, vous avez fait le formatage par HTML, et vous savez que le formatage est censé être fait par CSS, et vous réalisez cela est un problème, et vous avez jusqu'à demander 300 mots SO question à ce sujet. ..?

Vous ne voyez pas la solution, même si vous pouvez formuler la question ...?

Ici, je vais vous donner un indice:

  

Tout cela est enregistré dans la base de données par des   messages du forum comme code de formatage, et   puis traduit correspondant    HTML CSS lorsque la page est affichée.

Est-ce que l'aide?

Cette question est une blague?

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top