Каков наилучший способ предоставления стиля CSS по умолчанию, который переопределяется пользовательским интерфейсом jQuery, для сценариев без сценариев?

Question

Например: у меня на странице есть пейджер << 1 2 3 4 5 6 7 8 >>, где каждый элемент навигации представляет собой обычную ссылку HTML. Для современных браузеров с включенной JS я хотел бы украсить их с помощью jQuery .button () . Но я хотел бы иметь что-то для сценария NoScript. Очевидно, что я должен добавить немного стилей CSS для ссылок, но как я узнаю, что пользовательский CSS не испортит стиль jQuery?

Это бесполезная забота? Предоставляет ли jQuery некоторую функцию для очистки любых предыдущих стилей элемента?

Answer 1

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

Answer 2

Использовать собственную таблицу стилей пользовательского интерфейса jQuery. Взгляните на их документацию по фреймворку - это довольно просто.

Среди многих преимуществ использования CSS-структуры jQuery UI: надежный и кросс-браузерный CSS. Сплошной поток исправлений (если есть). И если вы решите изменить цветовую схему вашего приложения; все, что вам нужно сделать, это заменить таблицу стилей на новую theme-roll или одну из стандартных тем, которая поставляется в комплекте с jQuery UI.

Излишне говорить; Пользовательский интерфейс jQuery не может переопределить / взломать собственный CSS. И вы получите пейджер, который выглядит одинаково с включенным JavaScript и без него.

Совет: если у вас нет времени, чтобы прочитать документацию по фреймворку CSS jQuery UI; используйте FireBug (дополнение Mozilla FireFox) для проверки HTML-кода, сгенерированного пользовательским интерфейсом jQuery, и примените его к разметке без сценариев.

Обновление

Только что проверил ссылку, превращенную в кнопку. Вот разметка, сгенерированная плагином кнопки JQuery UI:

<a href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
    <span class="ui-button-text">An anchor</span>
</a>