Главная → Программирование → by

CSS3 решения для Internet Explorer

CSS3, вероятно, самая горячая тенденция в веб-дизайне прямо сейчас, позволяя разработчикам возможность реализовать ряд решений в своих проектах с очень простой CSS, избегая при этом необходимости прибегать к несемантический разметки, дополнительные изображений и сложных JavaScript.К сожалению, it’ ы не удивительно, что Internet Explorer, даже в его самой последней версии, по-прежнему не support большинство свойств и возможностей, представленных в CSS3.

Опытные разработчики понимают, что CSS3 могут быть добавлены в новые проекты с прогрессивного улучшения в mind.Это гарантирует, что содержание доступно в то время как не-браузеры поддерживают откат к менее расширенные возможности для user.

IE

Но разработчики могут столкнуться ситуации, когда клиент настаивает на том, усовершенствования работы крест-browser, требуя поддержки даже для IE6.В этом случае, I’ нас собрали вместе несколько вариантов, которые разработчики могут рассмотреть для тех случаев, когда поддержка функций CSS3 является обязательным для всех версий Internet Explorer (IE6, IE7, & IE8 — все из которых в настоящее время ещеВ значительной использования)

Opacity / Transparency

Я думаю, что все разработчики озадачены, почему Internet Explorer по-прежнему не поддерживает это очень популярный (хотя и хлопотно) собственности.It’ ы были вокруг так долго, что мы часто забываем, что it’ на самом деле CSS3.Хотя IE doesn’ T предложение поддержки opacity имущество, он предлагает аналогичные настройки прозрачности через собственные filter собственности:

Syntax

#myElement {
	opacity: .4; /* other browsers  and IE9+ */
	filter: alpha(opacity=40); /* IE6+ */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
}

Вы действительно нужно только вторая линия, которая работает во всех версиях Internet Explorer.Но если по какой-то причине вам нужна прозрачность настройка применяется только к IE8, а не в IE6 / 7, то вы можете использовать последнюю строку, которая более старых версий don’ T признают.Третья строка это просто еще один способ сделать принципе то же самое, но с более запутанным syntax.

Значение непрозрачности в конце каждой строки IE работает в основном так же, как opacity собственность делает, принимая число от 0 до 100 (opacity свойство принимает двузначное число от 0 до 1, поэтому“ 44″ для IE будет “ 0.44″ для остальных).Кроме того, как многие из них испытали при использовании прозрачности (даже при использовании стандартного метода), непрозрачность параметры будут унаследованы всеми дочерними элементами, для которой не существует простого workaround.

Demonstration

Этот элемент имеет сплошной синий цвет фона (# 0000FF), но на 60% прозрачный, делая вид, голубой во всех browsers

Это то же самоеЭлемент без непрозрачность settings.

Drawbacks

  • Фильтр собственности Microsoft свойство только, так что ваш CSS won’ T validate
  • Как и в случае с opacity собственности, IE фильтр вызывает все дочерние элементы наследуют opacity
  • Там могут быть проблемы с производительностью IE filters

Закругленными углами (радиус границы)

border-radius собственность (более известный как CSS3 закругленные углы) является еще одним популярным CSS3 аксессуара.Это свойство позволило разработчикам избежать головной боли раздутой JavaScript или дополнительных расположены элементы для достижения того же эффекта.Но, опять же, Microsoft doesn’ T хотим сотрудничать, так что IE doesn’ т есть поддержка этого property.

К счастью, по крайней мере, один человек пришел с очень полезная решение, которое может быть использовано в IE только для стилей. Remiz Rahnas __ из 18 | HTML Remix создал HTC file называется CSS изогнутые Corner которые могут быть загружены с Google Code.

Самое замечательное в этой части кода является то, что doesn’ T требует дополнительного обслуживания, если вы регулируете количество радиуса на закругленными углами.Вы просто ссылку на файл в CSS, и скрипт будет автоматически анализировать ваши CSS, чтобы найти правильное значение радиуса от стандартного border-radius property.

Syntax

Here’ ы, что ваш код может выглядеть следующим образом: 

.box-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

Как это работает довольно просто, как показано выше.В идеале, однако, будет применяться behavior недвижимость в IE только для стилей, используя тот же селектор в CSS, так что код знает, где взять значение радиуса from.

Demonstration

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

Drawbacks

  • HTC файла составляет 142 линий (minifying или GZipping поможет, но it’ все еще дополнительные наворотов)
  • behavior имущество сделает ваш CSS invalid
  • Ваш сервер должен иметь возможность загружать файлы для HTC эту технику, чтобы work
  • IE8, кажется, есть некоторые проблемы в некоторых случаях, когда файл HTC заставляет изогнутый элемент оказывать негативное г-индекс value

Box Shadow

box-shadow свойства CSS3 другую полезную функцию, которая даже добавить изогнутые тени окна естественным элементом, который использует border-radius собственность.IE doesn’ T поддержке box-shadow, но фильтр, который предлагает близкое replication.

Следует отметить, что box-shadow собственность была удалить из CSS3 стола иГраницы Module, так что его будущее в CSS3, кажется, немного неуверенно право now.

Syntax

.box-shadow {
	-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

Как показано выше, в дополнение к собственной WebKit и Mozilla свойства, вы можете добавить тень фильтр, который работает во всех версиях интернет-Explorer.

Demonstration

Этот элемент имеет тень, которая работает в интернете Explorer.

Drawbacks

  • Настройки фильтра IE тень не совпадать с других имущественных свойствами, поэтому для того, чтобы она выглядела так же, вам придется возиться со значениями, пока вы не получите это право, которое может привести к техническому обслуживанию headaches
  • Свойства фильтра doesn’ T проверки, но и не WebKit и Mozilla свойства, так что это недостаток всех browsers

Текст Shadow

Добавление тени к тексту элементов практикуется в печатных и веб-дизайн в течение многих лет.В Интернете, обычно это делается с изображениями, а иногда и с текстом дублирования в сочетании с позиционированием.CSS3 позволяет разработчикам легко добавлять тень к тексту с помощью простого и гибкого text-shadow property.

К сожалению, doesn’ т, кажется, простой способ добавить тень текста в Internet Explorer — даже с использованием собственных фильтров.Чтобы справиться с этой проблемой, голландский переднего конца разработчиком именем Kilian Valkhof написал JQuery plugin, который реализует текста тени в Интернете Explorer.

Syntax

Во-первых, в вашем CSS, вы должны установить text-shadow собственности: 

.text-shadow {
	text-shadow: #aaa 1px 1px 1px;
}

Значения указать цвет тени, положение на горизонтальной оси, положение на вертикальной оси, а количество blur.

После включая JQuery библиотеки и плагина в ваш документ, вы можете вызвать плагин JQuery: 

// include jQuery library in your page
// include link to plugin in your page

$(document).ready(function(){
	$(".text-shadow").textShadow();
});

Плагин также позволяет использовать параметры, чтобы переопределить CSS.См. плагин author’ оригинальные веб-страницы для более подробной информации о parameters.

Несмотря на то, кросс-браузерный JQuery плагин, который применяется падение shadows, одного I’ м демонстрируя выше, на самом деле использует CSS3 значение that’ S уже установлены в вашем CSS, поэтому он имеет возможность работать вместе сстандартные настройки CSS для текста тени, в то время как другой плагин должен быть установлен independently.

Demonstration

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

Drawbacks

Есть ряд существенных недостатков этого метода, что делает его очень вряд ли когда-нибудь быть практичным.You’ повторно, вероятно, лучше создать образ, чтобы заменить текст для IE instead.

Comments are closed.