Таблицы с ограниченным стилем без HTML5

Мне нужен подход, где я могу объединить CSS файлы на определенную часть страницы. Теоретически этот пример должен делать то, что мне нужно:

<html>
<head>
</head>
<body>

    <div>
        <style scope>
            @import url("style1.css");
        </style>
        <div class="testText">Test with Style 1</div>
    </div>
    <div>
        <style scope>
            @import url("style2.css");
        </style>
        <div class="testText">Test with Style 2</div>
    </div>
</body>
</html>

Однако я узнал, что элемент области доступен только в некоторых браузерах прямо сейчас (Firefox 21+ в основном). Итак, я ищу ленивый выход или проблему. Мне нужно интегрировать некоторый контент с разными стилями в сайт. Мы попытались загрузить оба набора файлов css, но есть некоторые имена стилей, которые появляются в обеих таблицах стилей, поэтому будет очень много работы, чтобы переименовать имена стилей в один набор файлов и в соответствующее содержимое html, особенно потому, что вы не можете просто реорганизовать с помощью Eclipse...:)

Есть ли какое-либо другое решение, которое может сделать такой результат широко совместимым?

Привет

Ответы

Ответ 1

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

Единственный способ, которым вы действительно можете добиться того, что вам нужно, - использовать уникальное имя класса (или идентификатор) для каждого раздела, а затем использовать наследование для сортировки пространства имен вашего CSS. Поэтому, если вы хотите настроить таргетинг на один конкретный раздел страницы, дайте ему родителям имя класса (например: class="testone"), а затем убедитесь, что любые стили, которые вы хотите применить к этому разделу, добавляются вместе с этим именем класса:

.testone .title{...}
.testone h1{...}
.testone a{...

и др.

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

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

Ответ 2

Имя атрибута в черновиках HTML5 scoped, а не scope.

Поддержка этого медленно внедряется, но нет оснований для использования атрибута или таблиц стилей с областью. Большинство браузеров возьмут <style scoped> просто как <style> и применит его ко всему документу.

Таким образом, лучше всего проанализировать проблему, которую вы пытаетесь решить, и найти другой подход к ней. Во многих случаях это тривиально, используя подходящие контекстуальные селекторы. Назначьте атрибут id для элемента и используйте селектор id в качестве первого компонента селекторов.