Как традиционная философия «HTML только для контента» обрабатывает динамическое форматирование? - PullRequest
Новая
       9

Как традиционная философия «HTML только для контента» обрабатывает динамическое форматирование?

6 голосов
/ 06 апреля 2009

Так долго я читал и понимал следующие истины, касающиеся веб-разработки:

  1. HTML для контента
  2. CSS для презентации
  3. JavaScript для поведения.

Обычно все нормально, и я обнаружил, что если я строго следую этим рекомендациям и использую внешние файлы .css и .js, это делает мой сайт намного более управляемым. Тем не менее, я думаю, что нашел ситуацию, которая нарушает эту точку зрения.

У меня есть система форумов, которую я создал для одного из моих сайтов. В дополнение к обычному форматированию для такой системы (ссылки, изображения, полужирный курсив и подчеркивание и т. Д.) Я позволил моим пользователям устанавливать форматирование их текста, включая цвет, семейство шрифтов и размер. Все это сохраняется в базе данных сообщений форума в виде кода форматирования, а затем транслируется в соответствующий HTML-код при просмотре страницы. (Немного неэффективно, технически я должен переводить перед сохранением, но таким образом я могу работать с системой вживую.)

В связи с природой этой и других подобных систем, я получаю множество тегов, плавающих в результирующем HTML-коде, которые, как мне кажется, неофициально не рекомендуются, поскольку я должен использовать CSS для форматирования. Это нарушает правила одно и два, которые утверждают, что HTML не должен содержать информацию о форматировании, и предпочитают, чтобы эта информация находилась в документе CSS.

Есть ли способ добиться динамического форматирования в CSS без включения этой информации в разметку? Стоит ли это хлопот? Или, учитывая подразумеваемые ограничения правильного кода, я ограничиваю тем, что мои пользователи могут делать , чтобы следовать «правильному» способу форматирования моего кода?

Ответы [ 9 ]

5 голосов
/ 06 апреля 2009

Можно использовать атрибут style для элементов: 

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

Если пользователи ограничены только некоторыми опциями, вы можете использовать class es: 

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

Обязательно используйте семантические элементы HTML: 

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

Общие семантические элементы и их термины в пользовательском пространстве:

  • <p> (абзацы)
  • <strong> (полужирный)
  • <em> (курсив)
  • <blockquote> (цитаты)
  • <ul> и <ol> с <li> (списки)
  • Подробнее ...

Вероятно, реже встречается в сообщениях на форуме, но все еще может использовать семантические элементы:

  • <h1>, <h2> и т. Д. (Заголовки; обязательно начинайте со значения, чтобы ваша страница имела смысл)
  • <del> и, в меньшей степени, <ins> (вычеркнуть)
  • <sup> и <sub> (верхний и нижний индексы соответственно)
  • <dl> с <dt> и <dd> (список пар)
  • <address> (контактная информация)
  • Подробнее ...
4 голосов
/ 06 апреля 2009

Это немного сложно. Я думаю о том, что вы действительно хотите разрешить посетителям. Произвольные цвета и шрифты? Это кажется довольно бесполезным. Акцент, заголовки, ссылки и изображения? Хорошо, что вы можете справиться достаточно легко, ограничившись этими тегами / используя разметку wikitext / forumtext, которая предоставляет только эти функции.

1 голос
/ 06 апреля 2009

Это интересная ситуация, потому что у вас может быть бесконечное количество различных стилей, в зависимости от вкусов ваших пользователей и их собственных личных стилей.

Есть несколько вещей, которые вы можете сделать, чтобы эффективно управлять этой ситуацией. Вероятно, проще всего было бы просто использовать переопределения стилей: 

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

Это быстро и просто. И помните, это то, для чего существуют переопределения стиля. Но, как вы сказали, это не вписывается в эту парадигму разделения контента и презентации. Чтобы разделить их немного больше, вы можете создать некоторую информацию CSS при загрузке страницы, а затем вставить ее в тег <head> вашего HTML. Это по-прежнему делает HTML и CSS несколько отличными, даже если вы не разделяете их технически.

Другой вариант - создать CSS и затем вывести его в файл. Это, однако, не будет эффективным (по моему мнению). Если бы вам пришлось при каждой загрузке страницы создавать новый CSS-файл, который учитывает уникальные предпочтения ваших пользователей, это как бы побеждает цель. Это то же самое, что и второй вариант, использующий тег <head>, вы просто делаете его отдельным. Даже если вы использовали такие методы, как кэширование, чтобы попытаться ограничить частоту создания файла CSS, действительно ли цель действительно оправдает средства?

Это совершенно субъективная тема, и вам, в конце концов, следует выбрать то, что вам наиболее удобно.

1 голос
/ 06 апреля 2009

Вы можете динамически создать встроенную таблицу стилей в заголовке html-страницы, передаваемой пользователям. Поместите заголовок страницы и настройте таргетинг на элементы, настраиваемые пользователем.

В качестве альтернативы, существует понятие использования внешних таблиц стилей, которые содержат наиболее распространенные настройки, но их будут сотни, чтобы учесть каждую возможную альтернативу. Если вы используете это, вам понадобится внешняя таблица стилей для определенного размера шрифта, цвета и т. Д., И динамическая ссылка на них в заголовке. Как с любой внешней таблицей стилей. Хотя включить это практически невыносимо сложно.

Хотя первый вариант будет работать нормально.

Как пример: 

<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>

Кроме того, мне пришло в голову, что вы, вероятно, могли бы создать таблицу стилей для каждого пользователя, чтобы применить настраиваемые аспекты. Используйте 

<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'. -->

Преимущество этого подхода в том, что он позволяет кэшировать таблицу стилей браузером. Хотя это, вероятно, загромождает папку css, если у вас нет конкретных пользовательских путей к листу пользователя? Вау, это может быть сложно ...:)

0 голосов
/ 06 апреля 2009

Я позволил своим пользователям устанавливать форматирование их текста, в том числе цвет, семейство шрифтов и размер. Все это сохраняется в базе данных форума сообщения в качестве кода форматирования, а затем переведено в соответствующий HTML при просмотре страницы.

Итак, вы завершили форматирование с помощью HTML, и вы знаете, что форматирование должно выполняться с помощью CSS, и вы понимаете, что это является проблемой, и вы дошли до того, что задали 300-вопросный ТАК вопрос об этом. ..?

Вы не видите решения, хотя можете сформулировать вопрос ...?

Здесь я дам вам подсказку:

Все это сохраняется в базе данных сообщения форума как код форматирования и затем переведен в соответствующий HTML CSS при просмотре страницы.

Это помогает?

Этот вопрос - шутка?

0 голосов
/ 06 апреля 2009

Я предполагаю, что вы разрешаете только ограниченный белый список безопасных опций и, следовательно, анализируете HTML пользователя уже.

При рендеринге HTML вы можете преобразовать каждое объявление стиля в класс: 

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

Кому: 

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

Трудоемко составить (и поддерживать) список. Однако вам не нужно беспокоиться о классе для каждой комбинации, что, конечно, является вашей главной проблемой.

Он также обладает преимуществом дополнительной безопасности, поскольку пользовательский CSS с меньшей вероятностью проскользнет через ваш фильтр, так как он все заменен, и это также должно гарантировать, что весь CSS действителен.

0 голосов
/ 06 апреля 2009

Перед тем, как что-либо предпринять, рассмотрите преимущества и затраты. Что на самом деле не так с вашим кодом прямо сейчас? Следует избегать тегов супа и комбинированного контента / презентации не потому, что он делает плохой сайт, а потому, что его трудно поддерживать. Если ваш HTML / CSS генерируется, кого это волнует? Если то, что у вас есть, работает, то придерживайтесь этого.

0 голосов
/ 06 апреля 2009

Самый простой способ справиться с этим, вероятно, - генерировать динамический CSS при генерировании страниц на основе настроек пользователя. Затем все выполняет работу, которую он должен делать, а сервер выполняет преобразование настроек пользователя в соответствующий CSS.

С помощью CSS, выполняющего эту работу, вы можете использовать соответствующие атрибуты в HTML (id и name и class и т. Д.) И генерировать CSS, который будет чисто форматировать все, как вы хотите.

0 голосов
/ 06 апреля 2009

Я не знаю, какой фреймворк или даже язык вы используете, но, например, Django использует определенный язык шаблонов для представления выходного HTML-кода. Я думаю, что хорошим решением было бы просто использовать другой «шаблон» в зависимости от того, что выбрал пользователь. Таким образом, вам не придется беспокоиться о нарушении «правил» или наличии множества неиспользуемых тегов, плавающих в DOM.

Если я полностью не понял ...!

...