Совместимость со старым HTML

Старые статьи ProfessorWeb содержат собственные HTML-обёртки листингов и изображений. Новый урок может использовать чистую предоставленную структуру, а исторический материал — shortcode, valuecode и imgcontent. Чтобы библиотека выглядела согласованно, не обязательно переписывать весь архив под новые классы.

В этом уроке вы создадите ограниченный учебный адаптер для старой разметки. Берём итог шестнадцатой главы и читаем локальный исходник «Запросы LINQ to XML». Работа касается отдельного legacy-sample.html, а не изменения действующего материала или его адреса.

Сопоставление ролей

В настоящем исходнике короткий код помещён в div.shortcode, большой — в div.valuecode с дополнительными обёртками, а изображение — в div.imgcontent. Эти названия связаны с историческим оформлением. Для современной системы важна их роль: технический текст, широкое содержимое и иллюстрация.

Такое сопоставление не означает, что старый и новый компоненты имеют одинаковую разметку. У нового листинга подпись языка является текстом, а исторический titlecode может быть пустой декоративной областью. Не нужно вставлять выдуманную подпись через CSS и считать, что она стала редакционным фактом. Лучше сохранить содержание и отдельно решить, какие служебные сведения известны.

Старые изображения имеют настоящие пути в своей структуре. При будущем применении сохраняйте их ссылки, иначе новый фон не поможет увидеть пропавший результат. Отдельный учебный образец ниже использует текстовый прототип вместо копирования картинки. Он показывает форму контейнера, не выдавая её за скриншот выполненного LINQ-запроса.

Перенос также не обновляет историческую технологию автоматически. Старый пример может оставаться полезным для своей версии, но новая типографика не превращает его в инструкцию по современному API. Дизайн и актуализация содержания являются связанными, но отдельными задачами.

Изолированный образец

Полный legacy-sample.html находится в учебной папке. Он подключает базу и основную версию стилей, а его тело старого содержания помещено в div.lab-legacy. Следующий фрагмент показывает полностью один учебный листинг:

<div class="lab-legacy">
  <div class="titlecode csharpcode"></div>
  <div class="shortcode">
    <pre><code>IEnumerable&lt;XElement&gt; elements =
    xDoc.Descendants("Employee");</code></pre>
  </div>
  <p>Учебный структурный фрагмент. Полный исторический пример остаётся в старом уроке.</p>
</div>

Код отражает форму встречающегося выражения, но не является полной программой. Он не должен получить подпись о фактическом выполнении. Цель — увидеть, как адаптер справляется с pre/code внутри старой обёртки. Полное содержание реального урока для сверки можно читать отдельно по сохранённому исходнику.

Область lab-legacy защищает новые правила от случайного применения ко всему документу. Мы не пишем глобальный селектор .shortcode pre, который мог бы повлиять на другие страницы без понимания их структуры. Для большого архива ограничение области действия важнее, чем краткость одного правила.

Полный адаптер CSS

Добавьте после итоговых стилей основной версии файл lesson-23.css:

.reading-lab .lab-legacy { max-width: var(--lab-reading-width); min-width: 0; font-size: 1.0625rem; line-height: 1.7; }
.reading-lab .lab-legacy .shortcode, .reading-lab .lab-legacy .valuecode {
  margin-block: 1.5rem; padding: 0; max-width: 100%; min-width: 0;
  background: var(--lab-soft); border-radius: var(--lab-radius); overflow: hidden;
}
.reading-lab .lab-legacy .shortcode pre, .reading-lab .lab-legacy .valuecode pre {
  margin: 0; max-width: 100%; padding: 1rem 1.25rem; white-space: pre;
  overflow: auto; font-size: .9375rem; line-height: 1.6;
}
.reading-lab .lab-legacy code { font-family: ui-monospace, Consolas, monospace; }
.reading-lab .lab-legacy .titlecode { margin-block: 0; }
.reading-lab .lab-legacy .imgcontent { margin-block: 1.5rem; max-width: 100%; }
.reading-lab .lab-legacy .imgcontent img { display: block; max-width: 100%; height: auto; }
.reading-lab .lab-legacy h2 { margin-block: 2.5rem 1rem; font-size: 1.5rem; line-height: 1.3; }

Ожидается сохранение структуры кода и собственная прокрутка старого листинга. Обёртки получают знакомую поверхность и расстояния, не требуя замены на lab-code. Изображения ограничиваются доступной шириной, а обычное объяснение наследует современную текстовую роль.

Вложенная область valuecode может содержать дополнительный контейнер. Наш селектор обращается к pre внутри неё, не предполагая единственное точное количество уровней. Но это не обещание поддержки любой старой разметки. Если внутри есть жёсткая ширина или скриптовый плагин, потребуется отдельное исследование соответствующего случая.

Не используем исторический id="intocode" как универсальный ключ оформления. В библиотеке могут встречаться особенности повторного использования идентификаторов или различия структуры. Классы роли и ограниченная область позволяют описать адаптер понятнее. При этом само содержание старого документа здесь не переписывается.

Каскад и конфликтующие правила

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

Специфичность участвует в выборе применяемой декларации, но не является единственным фактором каскада. Влияние селекторов объясняется в MDN. Не превращайте исправление в цепочку всё более длинных правил и повсеместных !important: это скрывает источник конфликта и усложняет следующее изменение.

Сначала найдите свойство, которое задаёт неправильный размер или переполнение. Затем решите, относится ли оно к общему компоненту, отдельной исторической вариации или устаревшему подключению. Один точный адаптер лучше десяти исключений для случайных страниц, когда их проблема имеет общую причину.

Особенно осторожно работайте с дополнительной прокруткой старого плагина. Если он создаёт собственные элементы, простое добавление overflow может дать два механизма перемещения. Учебный пример использует нативную прокрутку и не исполняет такой плагин. Его будущая замена потребует отдельного технического решения, а не только красивой поверхности.

Исторический класс csharpcode в образце сохранён как маркер прежнего языка. Сам по себе он не подключает подсветку и не создаёт подпись. В адаптере стилизуется контейнер titlecode, а данные остаются в настоящем тексте листинга. Если вы решите добавить обозначение языка, используйте известное значение и реальную текстовую разметку, а не выводите произвольное название из похожего класса.

Полезно отдельно сопоставить вложенные элементы выделения. В старом примере существенная строка может находиться внутри strong. Новое моноширинное семейство должно сохранить эту смысловую заметность, не превращая весь блок в жирный текст. Удалять выделение ради более ровного рисунка нельзя без понимания его преподавательской роли. Оно могло показывать именно изменённый фрагмент, который разбирается в следующем абзаце.

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

Сохранение адреса и материала

Старый урок остаётся по /my/LINQ/linq_xml/level7/7_1.php. Адаптер не создаёт второй опубликованный экземпляр под /articles/ и не переносит страницу в другую папку ради названия компонента. Новые оглавления могут ссылаться на тот же материал, сохраняя единое содержание.

Перед будущим применением сопоставьте абзацы, порядок примеров, ссылки и ресурсы с исходником. Проверка здесь относится не только к внешнему виду. Если пропала строка кода или изображение результата, визуальное согласование нельзя считать завершённым.

Для следующего образца выберите другую старую статью с иной длиной кода и названием изображения. Ожидайте, что общие роли сохранятся, а конкретные исключения будут названы отдельно. Не заявляйте поддержку всей библиотеки по двум удачным коротким фрагментам.

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