<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

CSS хаки для браузеров

CSS хаки для браузеров

Любой, кто занимался Web-дизайном, сталкивался с такой проблемой: когда все браузеры нормально отображают стиль, применённый к странице, и только один "гадёныш" уродует страницу. Чаще всего этим "гадёнышем" становится браузер Internet Explorer, особенно 6-я версия и ниже, которыми пользуются примерно 7-8% пользователей Интернета. Согласитесь, что это весьма много, чтобы просто так на них забить. Хотя и другие браузеры (даже современные) иногда показывают сюрпризы. Поэтому для того, чтобы любой браузер правильно отображал Вашу страницу и были придуманы CSS хаки.

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

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

Ещё один способ связан с тем, что главным "дезертиром", как правило, является IE. Поэтому для него придуман отдельный способ, даже без использования скриптов. Заключается он в условных комментариях в голове документа (внутри тега <head>). Работает он только для браузеров IE, но, как правило, с ними и бывают проблемы, поэтому данный способ можно встретить очень часто. Выглядит он таким образом:

<!--[if IE]>
  <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->

Если перевести на русский язык, то будет примерно так: "Если браузер пользователя - IE, то подключить таблицу стилей из файла css/ie.css".

Если необходимо указать конкретную версию браузера, то вместе с "IE" необходимо поставить ещё и номер версии. Например так:

<!--[if IE 6]>
  <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->

Как не трудно догадаться, стиль будет применён только для браузеров IE версии 6. Также бывает необходимо указать таблицу стилей для браузеров ниже определённой версии. В таком случае, используется данный синтаксис:

<!--[if lt IE 6]>
  <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->

Данный стиль будет применён для всех версий браузеров IE ниже 6-ой версии. Если бы вместо "lt" поставили "lte", то это бы означало ниже или эквивалентно 6-ой версии.

В большинстве случаев, данных знаний уже достаточно, и надо стараться, чтобы не требовалось большего. Однако, существуют ситуации, когда данные способы не совсем разумны. Например, при ситуации, когда в огромном CSS файле, всего лишь 1-2 стиля нуждаются в особенном виде для отдельных браузеров. Глупо в таком случае создавать отдельный огромный файл, который потом подключать через скрипты или через такие условия. Вот поэтому и были придуманы CSS хаки для браузеров, к которым мы сейчас и переходим. И начнём мы с:

1) Internet Explorer. Данный CSS хак работает для версий IE7 и ниже. Как показывает мой опыт, браузер IE8 уже очень приличный, поэтому с ним у меня ещё проблем не возникало. А вот для браузеров IE7 и ниже показываю хак:

p {
  margin-top: 20px; # Для всех браузеров
  * margin-top: 30px; # Для браузеров IE7 и ниже.
}

Как видите перед вторым свойством "margin-top" стоит символ "*". Это и есть CSS хак. То есть если поставить "*" перед именем свойства, то данное свойство будет применено только для браузеров IE7 и ниже. Вывод: для всех браузеров "margin-top" будет в значении "20px", а для браузеров IE7 и ниже в значении "30px". Если требуется указать стиль только для IE6 и ниже (это часто бывает, потому что с IE7 гораздо лучше дела обстоят и чаще всего править стиль для этого браузера не требуется), то существует другой CSS хак:

p {
  margin-top: 20px; # Для всех браузеров
  _margin-top: 30px; # Для браузеров IE6 и ниже.
}

Как не трудно заметить, перед вторым свойством стоит знак "_", который и является CSS хаком для браузеров IE6 и ниже.

2) Mozilla Firefox. Данный CSS хак работает только для браузеров Mozilla Firefox. Вот его пример:

p, x:-moz-any-link {
  margin-top: 30px;
}

В данном примере сообщается, что стиль к селектору "p" будет применён только для браузеров Mozilla Firefox, а все остальные браузеры данный стиль проигнорируют.

3) Opera. Этот CSS хак используется для браузеров Opera. Пример его использования:

* |html[xmlns*=""] p {
  margin-top: 30px;
}

Здесь я думаю, что также всё понятно.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (69):

sync.o sync.o 04.05.2011 18:35:51

Там в условных комментариях надо два тире поставить: <!--[if IE]> .......... <![endif]--> И где указываются в квадратных скобках версии IE нужен пробел перед цифрой: [if IE 6] А то не работает ни фига!

Ответить

Admin Admin 05.05.2011 12:28:00

Спасибо, уже дописано.

Ответить

Alim_(I) Alim_(I) 18.05.2011 17:28:04

А можно написать только один хак на всю страницу? Или можно все написать, чтобы любой браузер отображал всё правильно?

Ответить

Admin Admin 18.05.2011 17:31:42

Хаки - это плохо, поэтому чем меньше их - тем лучше. В идеале, их вообще быть не должно. Все хаки смысла писать не имеет, так как в большинстве случаев браузеры очень похожи. И для них стили будут одинаковыми.

Ответить

Alim_(I) Alim_(I) 18.05.2011 17:44:58

Спасибо! Кстати, можете объяснить почему у меня изображения не отображаются в Mozilla Firefox?

Ответить

Admin Admin 18.05.2011 17:46:18

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

Ответить

Alim_(I) Alim_(I) 18.05.2011 17:50:33

А где тут "Настройки"?

Ответить

Admin Admin 18.05.2011 17:54:56

Инструменты/Настройки/Содержимое. Должен быть включён чекбокс "Автоматически загружать изображения".

Ответить

Alim_(I) Alim_(I) 18.05.2011 17:57:41

"Инструменты" есть, а "Настройки" и "Содержимое" нету. Может я где-то не там ищу? Я ищу в мозилле.

Ответить

Admin Admin 18.05.2011 18:08:49

В меню Инструменты есть пункт "Настройки". Кликайте по этому пункту, а дальше откроется окно, в котором выберите вкладку "Содержимое".

Ответить

Alim_(I) Alim_(I) 18.05.2011 18:14:57

Я не вижу пункт "Настройки"...

Ответить

Admin Admin 18.05.2011 18:16:02

Какая версия Mozilla?

Ответить

Alim_(I) Alim_(I) 18.05.2011 18:23:03

Не помню, помойму 4-ая

Ответить

Admin Admin 18.05.2011 18:49:17

Тогда не знаю, потому что у меня firefox 3.

Ответить

masya masya 05.02.2012 10:41:07

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

Ответить

Admin Admin 05.02.2012 13:34:52

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

Ответить

masya masya 05.02.2012 15:16:22

Ну а как сделать чтоб все браузеры отображали нормально,а не одна опера мини.

Ответить

Admin Admin 05.02.2012 15:17:52

Не использовать хаки, а просто писать свойства, тогда они будут применяться ко всем браузерам.

Ответить

masya masya 05.02.2012 15:29:32

Ну я вобще теперь хаки неиспользую,но почему все браузеры кроме оперы портят и уродуют сайт?

Ответить

Admin Admin 05.02.2012 15:30:49

Кривой код, кривая вёрстка. Учитесь верстать, ничего другого здесь добавить никто не сможет.

Ответить

masya masya 05.02.2012 15:36:49

Ну а как сделать чтоб браузеры отображали нормально

Ответить

Admin Admin 05.02.2012 15:38:44

Вот курс, где обо всём этом говорится: http://srs.myrusakov.ru/makeup Здесь в двух словах не описать. Но можно сказать так: если писать по уму, если всё делать аккуратно, то таких проблем не возникает, разве что в очень малых количествах и в очень сложных дизайнах. И вот как писать правильно, аккуратно и по уму данный курс и обучает.

Ответить

masya masya 05.02.2012 15:46:41

У вас ктоекто которого вы учите стырил код дать сылку

Ответить

masya masya 05.02.2012 15:47:38

Вотона она http://vasya.xe0.ru/ стырил её илья денисов

Ответить

Admin Admin 05.02.2012 15:52:35

Спасибо, что сообщили. Вреда это не принесёт, но всё равно лучше удалить данный сайт.

Ответить

masya masya 05.02.2012 15:55:30

Чей его?

Ответить

Admin Admin 05.02.2012 15:56:19

Ильи Денисова.

Ответить

masya masya 05.02.2012 15:57:39

А кто будет удалять вы?

Ответить

Admin Admin 05.02.2012 15:58:08

Написал его хостеру просьбу удалить сайт и заблокировать его аккаунт.

Ответить

masya masya 05.02.2012 15:59:00

А за это могут посадить?

Ответить

Admin Admin 05.02.2012 16:01:26

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

Ответить

masya masya 05.02.2012 16:02:49

А сколько примерно денег?А вы сами дезайн придумавали?И почему за сайт много штрафа?

Ответить

Admin Admin 05.02.2012 16:04:47

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

Ответить

masya masya 05.02.2012 15:59:25

Только неговори ему что я тебе сказал просто он мой друг!

Ответить

masya masya 05.02.2012 16:07:48

Ну выже сами показавали видиоурок как скапировать зачем?

Ответить

Admin Admin 05.02.2012 16:09:30

Я не показывал урока, как копировать сайты, тем более, ещё так плохо скопировать.

Ответить

masya masya 05.02.2012 16:11:50

нет я както раз чтото набрал а с бока там был видиоурок я нажал и там было показано как что определит

Ответить

Admin Admin 05.02.2012 16:16:56

Firebug нужно использовать для своих сайтов, а не для воровства чужих.

Ответить

masya masya 05.02.2012 16:20:39

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

Ответить

Admin Admin 05.02.2012 16:21:47

Потому что она растягивается, а при растяжении качество ухудшается.

Ответить

masya masya 05.02.2012 16:23:21

нет у меня на главной стоит 16% и на другой тоже 16% только на другой качество плохое

Ответить

Admin Admin 05.02.2012 16:23:59

16% - это относительный размер, который будет тем больше, чем больше контента.

Ответить

masya masya 05.02.2012 16:25:32

всё сделал спасибо!

Ответить

masya masya 05.02.2012 16:29:08

почемуто непоявляеться почему опять разплывчата?

Ответить

masya masya 05.02.2012 18:18:25

Михаил почему у меня код невалидный <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <img src = "logotype.png" width = "17%" alt = "шапка сайта"/> <img src = "colamn1.png" width = "3%" alt = "шапка сайта"/> <meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251"> <title>как создать свой сайт</title> <link rel="stylesheet" type="text/css" href="style.css"> <div id="panelMenu"> <a href = "главная.html"><div id="menu" style="position: absolute; left: 4px;" href = "new 2.html">Главная страница</div></a> <a href = "малат.html"><div id="menu" style="position: absolute; left: 177px;" href = "гибир.html">програмирование</div></a> </div> </head> <body text = "blue"> <table> <tr> <td style = 'width: '30%;' > <div style = "text-align: left;"> <p style = "text-align: left;"> <p>Здравствуйте.Если вы находитесь на этом сайте,то наверника пришли сюда по поиску информации.Сдесь вы можие скачать горезонтальный и вериткальные меню.Научиться програмированию.Вобщем поищите по сайту!</p> </td> </tr> </table> </body> </html>

Ответить

Admin Admin 05.02.2012 18:21:31

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

Ответить

masya masya 05.02.2012 18:23:54

можишь мне его исправить чтоб валидный был

Ответить

Admin Admin 05.02.2012 18:35:31

Я-то могу, конечно, но ведь Вам нужно учиться.

Ответить

masya masya 05.02.2012 19:00:06

ну я научюсь а выь мне покачто исправите на валидный а я посмотрю и запомню

Ответить

Admin Admin 05.02.2012 19:16:17

Вы не научитесь, если я исправлю.

Ответить

JDaniels JDaniels 26.05.2012 20:57:35

В самом первом листинге после type нет "=", в листинге хака для IE 6 в css-комменте 7 вместо 6. Пардон за придирки ;-)

Ответить

Admin Admin 26.05.2012 21:03:38

Исправил, спасибо!

Ответить

BotaniQue BotaniQue 31.07.2012 15:44:08

Здравствуйте, Михаил. Подключил таблицу стилей для ІЕ, а в Експлорере всё равно отображается основная таблица стилей. Таблицу поместил в голову документа, перед ссылкой на основную таблицу. Что я делаю не так? Спасибо.

Ответить

Admin Admin 31.07.2012 21:22:26

Наоборот сделайте. Тогда все остальные браузеры проигнорируют вторую запись css, заключенную в условные комментарии, а IE как раз примет её.

Ответить

BotaniQue BotaniQue 01.08.2012 14:59:41

Спасибо, Михаил. Сделал.

Ответить

BotaniQue BotaniQue 12.08.2012 19:40:43

Здравствуйте, Михаил. У меня на странице 5 фоновых изображений (в теге body), но Експлорер их не отображает, поскольку не может отобразить больше одного фонового изображения. Какой хак нужно применить для того, чтобы во всех Експлорерах цвет фона был чёрным? При этом таблицу стилей подключать нельзя.

Ответить

Admin Admin 12.08.2012 21:31:31

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

Ответить

BotaniQue BotaniQue 13.08.2012 15:40:27

Спасибо большое. Хак сработал.

Ответить

Дмитрий184 Дмитрий184 12.03.2013 05:12:34

Михаил! Спасибо за интересную статью! Вот еще CSS хаки для браузера IE Возможно, стоит их дописать в вашу статью для полноты информации 1) двойной слеш (//) перед css-свойством даст видимость данного свойства только браузеру IE любой версии. 2) звездочка (*) или слеш (/) перед css-свойством даст видимость данного свойства только браузерам IE6 и IE7. 3) Подчеркивание (_) или дефис (-) перед css-свойством даст видимость данного свойства только браузеру IE6.

Ответить

sergkosm sergkosm 11.04.2013 01:15:35

У меня страницы отображаются нормально во всех браузерах, проблемы с одним браузером OPERA. причем с одной его версией. Такое чувство, что страница сверстана наизнанку. Пробовал применить для нее хак * |html[xmlns*=""], вставляю просто в таблицу стилей, но она (опера) просто игнорирует его.

Ответить

Admin Admin 11.04.2013 12:16:49

Если эта не новая версия Opera, то не обращайте внимания.

Ответить

reload_69 reload_69 13.08.2013 13:25:10

А вот как быть с браузером Yandex и стилем "position: fixed;" на сайте: http://filter-tver.com/. Ситуация такая - во всех браузерах (что пробовал)корзина отображается как надо кроме браузера Yandex. В Yandex корзина попадает в левый угол окна. Хотелось бы прописать какой-нибудь хак для него - только как это сделать..?

Ответить

reload_69 reload_69 28.08.2013 10:45:53

Похоже ответа на этот вопрос здесь я не дождусь..(((((

Ответить

tolia2012 tolia2012 23.10.2013 09:33:54

привет,как добавить к тегу body этот хак,для браузера chrome? @media all and (-webkit-min-device-pixel-ratio:0) { }

Ответить

Admin Admin 23.10.2013 12:07:09

Для таких браузеров как chrome, opera и firefox, i9 и ie10 вообще хаков не надо использовать. В новых версиях они, во-первых, могут уже не работать, во-вторых, это достаточно адекватные браузеры и под них надо подстраиваться одним CSS-файлом без всяких хаков.

Ответить

Максим2193 Максим2193 26.02.2014 15:57:43

Есть проблема: в IE картинку на фон отображает, а в Chrome и Opera - ни к черту. Стоит ли делать хак? И что делать вообще?

Ответить

tikkiwiki tikkiwiki 04.03.2014 14:08:03

Максим, нужно смотреть. Так ничего не посоветую.

Ответить

rutttvvv rutttvvv 13.11.2014 14:06:17

Здравствуйте, скажите пожалуйста есть ли какие-нибудь хаки для Яндекс браузера? У меня в яндексе 2 блока на сайте съежают вниз примерно 30-40 пикселей, у всех остальных браузерах все нормально.

Ответить

rutttvvv rutttvvv 13.11.2014 14:15:34

Отвечаю сам. Все норм стало. Хаки не понадобились. Спасибо за оперативный ответ. :)

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.