Динамический выбор таблиц стилей
31 сообщение
#16 лет назад
Вы уж извените за такой лаиерский вопрос, Я делаю верстку сугубо по в3ц (валидная), но естественно в разных браузерах сайт будет выглядеть с отличиями, а мне нужны практично точные копии. Вопрос звучит так: как посредством JavaScript или PHP или другим доступным методом сделать динамический выбор таблици стилей либо подключение таблици которая переоприделила некоторые правила.
1 сообщение
#16 лет назад
На php примерно так<link rel="stylesheet" href="
<?php
if strstr("Mozilla",$_SERVER)
{echo("mozilla_style.css"
;}else
{echo("other_style.css"
;}?>
">
Хотя есь способы и попроще
183 сообщения
#16 лет назад
файл 0.html<html>
<head>
<link id="link1" type="text/css" rel="stylesheet" href="1.css" />
</head>
<body>
Body content<br />
<input type="button" value="1" onclick="document.getElementById('link1'
.href='1.css';" /><input type="button" value="2" onclick="document.getElementById('link1'
.href='2.css';" /></body>
</html>
файл 1.css
body
{
color: #0000ff;
}
файл 2.css
body
{
color: #ff0000;
}
31 сообщение
#16 лет назад
А если сделать так на JavaScript При загрузке страници в зависимости от браузера (IE, FireFox, Opera) подключается конкретная таблица?
183 сообщения
#16 лет назад
Ну зделай так.Я просто показал пример как через яваскрипт менять на лету ЦСС, а ты уже заточи под свои нужды.
296 сообщений
#16 лет назад
Если делать все согласно w3 и указывать все свойства для тегов, то различий практически не будет - знаю по своему опыту. Естественно, что будут некоторые незначительные различия у элементов форм (input'ы и пр) - но там совершенно мизер, практически незаметный. Для кроссбраузерности надо обязательно указать doctype и изначально, например, обнулить паддинги и маргины у h1..h6, form, input и прочих тегов - тогда все ок будет.
31 сообщение
#16 лет назад
aats, Я работаю по строгой ДТД это все делаю на как не крути, все равно тотже внутренний отступ па разному будет смотреться в опере и ие к томуже верстаю все фактически блоками, а если в них нет надобности а так оно обычно для многих элементов страници непосредственно прописую свойства границ отступов итп для конкретных элементов ссилка абзац.... поэтому и хочу узнать как переопредилить таблицу для разных браузеров. Итересут концепция сделать основную таблицу с правилами, и токоличество таблиц которые подключаются при конкретном условии для переопределения лиш некоторых правил.
296 сообщений
#16 лет назад
Цитата:внутренний отступПример, плиз... Имхо, можно настроить все (часто используемые - точно) элементы так, чтобы смотрелось одинаково - уметь лишь надо. Как ни странно, мои документы валидны и при этом смотрятся везде одинаково - безо всяких выборов браузеров.
PS: Исключение лишь с элементами форм, как я сказал, но это зачастую попросту не исправить (напрмимер, для Input'а в Opera нельзя задать боковой отступ текста).
441 сообщение
#16 лет назад
pilot_if, поддерживать несколько CSS-файлов для разных браузеров зафачишься. Лучше подольше посидеть над одним, общим (тем более, что это не так сложно, как может показаться). В крайнем случае можно вынести в отдельный файл фиксы каких-нибудь багов IE - это проще простого делается с помощью conditional comments.
31 сообщение
#16 лет назад
aats, в ширене блоков разници не замечаеш?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример</title>
<style type="text/css">
div#main {background-color:#FF0000; width:500px; height:200px; padding:30px; margin:30px; float:left}
p.cont {background-color:#00FFFF; width:80px; height:20px; padding:5px; margin-left:20px; float:left}
</style>
</head>
<body>
<div id="main">
<p class="cont">qwerty</p>
<p class="cont">qwerty</p>
<p class="cont">qwerty</p>
<p class="cont">qwerty</p>
</div>
</body>
</html>
sukebe, Вот это я и хотел узнать, я не собираюсь под каждый браузер клепать отдельную разметку, мне просто для IE и для FireFox надо переоприделить некоторые правила.
441 сообщение
#16 лет назад
pilot_if, ну, вариантов подсунуть другой лист стилей - масса. Можно смотреть $_SERVER в PHP и подсовывать то, что нужно, можно средствами апача (mod_rewrite - директивой RewriteCond проверяешь переменную HTTP_USER_AGENT, пример есть вот здесь: ссылка).Если бы надо было переопределять правила только для IE, то тогда однозначно conditional comments.
296 сообщений
#16 лет назад
pilot_if, раз вы используете строгий стандарт, то почему написано HTML 4.01 Transitional?Как бы там ни было, вот вполне кроссбраузерный код, выдающий аналогичный результат (вариантов много - это один из них):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
span#main {
background-color:#FF0000;
width: 500px;
height: 200px;
padding: 30px;
margin: 30px;
float: left;
}
span.cont {
background-color:#00FFFF;
width: 80px;
height: 20px;
padding: 5px;
margin-left: 20px;
float: left;
}
</style>
</head>
<body>
<span id="main">
<span class="cont">qwerty</span>
<span class="cont">qwerty</span>
<span class="cont">qwerty</span>
<span class="cont">qwerty</span>
</span>
</body>
</html>
PS: To Admins: сделайте, чтобы табуляторы не удалялись у кода - некрасиво смотрится...
31 сообщение
#16 лет назад
sukebe, подскажите пожалуйста, как пользрваться conditional comments, желательно в примере.