Я негодую → OMG!!! И они хотят конкурировать в вебе, не поддерживая Chrome?!
Устаревший или неподдерживаемый веб-обозреватель
Ваш веб-обозреватель Chrome не поддерживается системой КонсультантПлюс.
Для работы с системой КонсультантПлюс вы можете воспользоваться MS Internet Explorer версии 6.00 и выше (установить отсюда) или Mozilla Firefox версии 3.5 и выше (установить отсюда).
Техническое описание вашего веб-обозревателя
Скорость загрузки данных с сервера
JavaScript Успех
Хост base.consultant.ru
Веб-обозреватель Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.7 (KHTML, like Gecko) Ubuntu/11.10 Chromium/16.0.912.77 Chrome/16.0.912.77 Safari/535.7
Тип веб-обозревателя Ошибка
Платформа Linux i686
Cookie Успех
XMLHTTP Успех
XMLDOM Успех
JS Session Storage Успех
JS Persistent Storage УспехЯ, конечно, понимаю сложность кроссбраузерной вёрстки и JS-программирования, но не настолько же, чтобы отвергать браузер на основе его типа, а не потому что он не поддерживает Cookie, XMLHTTP, XMLDOM, JS Session Storage и JS Persistent Storage, которые для них, похоже, ключевые. Зато знают где установить IE 6 для Linux i686 (хотя вообще браузер говорит, что он на Linux x86_64 крутится и прикидывается даже Safari) — выделено жирным.
А я думал солидная фирма…
Пруф
Интерсно, кто ещё
Каскадные Таблицы Стилей → rgba.php: изящный и миниатюрный «костыль» обеспечивает обратную совместимость с браузерами, не понимающими полупрозрачные цвета rgba(…)
Обеспéчение обратной совместимости rgba(…) ещё никогда не было таким простым, как copy+paste:
Код rgba.php на языке PHP, которым достигается этот восхитительно простой трюк, лежит на GitHubпод лицензией MIT. Занимает всего-навсего 2658 байтов.
Автор — Lea Verou. Хвала ей!
background: url('/rgba.php/rgba(255, 255, 255, 0.3)');
background: rgba(255, 255, 255, 0.3);
Код rgba.php на языке PHP, которым достигается этот восхитительно простой трюк, лежит на GitHub
Каскадные Таблицы Стилей → Изменение ширины элемента с «шагом» в несколько пикселей из песочницы
Заранее оговорюсь, что чистым CSS здесь, к сожалению, обойтись не получится: Firefox и IE8+ слишком точно (да-да, в данном случае это плохо) производят вычисления ширины блоков. Однако для этих браузеров дописывается нехитрый скриптик в пару строк, если таки надо достичь идеала, хоть это и портит всю прелесть.
Для тех, кому лень читать всё, ссылка на окончательный вариант: jsfiddle.net/XeFTr/11/
Суть в том, что иногда необходимо отобразить на странице резиновый блок с несколькими дочерними элементами, причем потомок должен быть либо виден целиком, либо не виден вообще. Самый простой пример — лента каких-нибудь картинок с прокруткой и стрелочками по бокам. Очень некрасиво смотрится выглядывающее из-под «overflow: hidden» изображение, обрезаннное сбоку. Выход — заставить ширину обёртки всегда быть кратной скольки-то пикселям.
Разумеется, если ширина потомков разнится от элемента к элементу, то этот способ не имеет смысла.
Принцип работы заключается в том, что большинство браузеров вычисляют ширину потомка, если она задана в процентах, исходя из ширины родителя. Таким образом, если у элемента ширина 1000%, то при изменении ширины его родителя на пиксель сам элемент растянется или сожмётся на 10 пикселей. Собственно, всё.
Эту штуку описывал в лебедевском скринкасте Сергей Чикуёнок еще в 2008 году, в контексте исправления бага с «прыгающими» блоками в IE6. Однако я, к своему удивлению, так и не нашел описания этой презабавной технологии на Хабре.
Для тех, кому лень читать всё, ссылка на окончательный вариант: jsfiddle.net/XeFTr/11/
В чем суть?
Суть в том, что иногда необходимо отобразить на странице резиновый блок с несколькими дочерними элементами, причем потомок должен быть либо виден целиком, либо не виден вообще. Самый простой пример — лента каких-нибудь картинок с прокруткой и стрелочками по бокам. Очень некрасиво смотрится выглядывающее из-под «overflow: hidden» изображение, обрезаннное сбоку. Выход — заставить ширину обёртки всегда быть кратной скольки-то пикселям.
Разумеется, если ширина потомков разнится от элемента к элементу, то этот способ не имеет смысла.
Как это работает?
Принцип работы заключается в том, что большинство браузеров вычисляют ширину потомка, если она задана в процентах, исходя из ширины родителя. Таким образом, если у элемента ширина 1000%, то при изменении ширины его родителя на пиксель сам элемент растянется или сожмётся на 10 пикселей. Собственно, всё.
Эту штуку описывал в лебедевском скринкасте Сергей Чикуёнок еще в 2008 году, в контексте исправления бага с «прыгающими» блоками в IE6. Однако я, к своему удивлению, так и не нашел описания этой презабавной технологии на Хабре.
Каскадные Таблицы Стилей → Свойство «text-size-adjust» становится более кроссбраузерным
Читателям справочника «Safari CSS Reference» уж конечно попадалось в нём свойство «-webkit-text-size-adjust», которое, согласно справочнику, управляет отображением текста на мобильнике (iOS) и может принимать одно из трёх следующих значений:
→ «auto» (текст на мобильнике подстраивается автоматически);
→ «none» (размер текста на мобильнике не изменяется);
→ «60%» (или другой процент) означает желаемый относительный размер текста на мобильнике.
Роджер Йоханссон в своём блоге «456 Berea Street» предостерегал от употребления этого свойства и призывал отказаться от него напрочь, потому что однажды столкнулся с сайтом, на котором это свойство имело значение «none» и привело к тому, что размер шрифта нельзя было увеличить не только в мобильнике, но и в обыкновенном компьютере (нажатием«Command-Plus») ни в одном из браузеров на основе WebKit: ни в Safari, ни в Chrome, ни в OmniWeb, ни в iCab…
Несмотря на это, WebKit — не единственная основа мобильных браузеров; как мы знаем, существует ещё и мобильный Firefox. Разработчики Firefox объявили в вики MDN, что Firefox 11 и более новых версий также станет поддерживать свойство«text-size-adjust», которое, таким образом, становится ещё более кроссбраузерным. (Как XaocCPS мне подсказывает, это свойство под именем «-ms-text-size-adjust» поддерживается также и в Windows Phone 7.)
→ «auto» (текст на мобильнике подстраивается автоматически);
→ «none» (размер текста на мобильнике не изменяется);
→ «60%» (или другой процент) означает желаемый относительный размер текста на мобильнике.
Роджер Йоханссон в своём блоге «456 Berea Street» предостерегал от употребления этого свойства и призывал отказаться от него напрочь, потому что однажды столкнулся с сайтом, на котором это свойство имело значение «none» и привело к тому, что размер шрифта нельзя было увеличить не только в мобильнике, но и в обыкновенном компьютере (нажатием
Несмотря на это, WebKit — не единственная основа мобильных браузеров; как мы знаем, существует ещё и мобильный Firefox. Разработчики Firefox объявили в вики MDN, что Firefox 11 и более новых версий также станет поддерживать свойство
JavaScript → Расстановка точек над onmousewheel и немного о луковом супе
Я уже писал о своих экспериментах со скроллбарами на сайтах и в веб-приложениях, но эти опыты удались не вполне. Поэтому я пока оставил идею кастомизации скроллбаров, но решил досканально разобраться с событиями, вызываемыми прокруткой колеса мыши.
Итак, задача: реализовать реакцию на события прокрутки мышиного колеса над определённым блоком, то есть не трогая «родной» скролл окна браузера. Реализация должна быть кроссбраузерной и не использовать какие-либо фреймворки.
Забегая вперёд, скажу, что этот экперимент удался вполне, а итоговый результат работает во всех десктопных браузерах, начиная с IE7 (по идее, должно работать и в шестом, но сейчас нет возможности это проверить). Также, хочу выразить благодарность поисковой системе Гугл. Без неё жизнь была бы соткана из уныния и отчаяния.
Итак, задача: реализовать реакцию на события прокрутки мышиного колеса над определённым блоком, то есть не трогая «родной» скролл окна браузера. Реализация должна быть кроссбраузерной и не использовать какие-либо фреймворки.
Забегая вперёд, скажу, что этот экперимент удался вполне, а итоговый результат работает во всех десктопных браузерах, начиная с IE7 (по идее, должно работать и в шестом, но сейчас нет возможности это проверить). Также, хочу выразить благодарность поисковой системе Гугл. Без неё жизнь была бы соткана из уныния и отчаяния.
Веб-разработка → APNG (анимированный PNG) в Google Chrome, Safari и IE
В последние дни Как известно, анимированные PNG в формате APNG не включены в стандарт PNG,
К счастью, можно обойтись и без крайностей. Евгений Степанищев упомянул о том, что Давид Мзареулян сочинил и выложил на Github библиотеку
Объём этой библиотеки — чуть больше
Рассказ Мзареуляна о ходе разработки к тому же ещё и познавателен.
Каскадные Таблицы Стилей → -prefix-free: изящный и миниатюрный «костыль» на JavaScript, избавляющий от необходимости вспоминать и перечислять префиксы свойств CSS3 для разных браузеров
Всякому такому автору сайта, который когда-либо снабжал своё детище стилями CSS3, уж конечно доводилось сталкиваться с необходимостью многократно повторять одно и то же свойство CSS3 и давать ему одно и то же значение, но указывая перед именем свойства различные префиксы разработчиков браузеров (vendor prefixes).
Эти префиксы необходимы для того, чтобы во браузерах работали те свойства CSS3, которые ещё не до конца стандартизированы: считается, что отдельное задание свойства для каждого из нынешних браузеров поможет в дальнейшем обойти возможное различие между нынешней реализацией свойства в каждом конкретном браузере и окончательными требованиями страндарта. Во браузере Mozilla Firefox для этой цели употребляетсяпрефикс «-moz-», в Google Chrome и в Apple Safari (и в других браузерах на основе Webkit) — префикс «-webkit-», в Опере — префикс «-o-», в IE — префикс «-ms-», а в Konqueror (и в наиболее ранних версиях Safari) — префикс «-khtml-».
На практике, однако же, автор сайта чаще всего использует своего рода «общий знаменатель» возможностей нескольких браузеров — значения свойств CSS3, работающие одинаково (или почти одинаково) во всех современных браузерах. Да и записываются все они также одинаково. Указание префиксов сводится поэтому ко многократному повторению свойств. Например, чтобы придать нескольким кнопкамjQuery-плагина ColorBox закруглённые края и заставить их отбрасывать тень, поневоле придётся записать в CSS вот что:
Во-первых, это задалбывает.
Во-вторых, это неэкономично.
В-третьих, всегда существует риск забыть о необходимости указать тот или иной префикс. (В списке «How to avoid common CSS3 mistakes» эта ошибка — на первом месте.)
Поэтому рано или поздно должно было появитьсякакое-нибудь средство, позволяющее автору CSS-кода указать одни только безпрефиксные формы CSS-свойств и CSS-значений — а автоматика позаботилась бы об их адаптации к каждому конкретному браузеру.
И такое средство появилось. Вот оно:
![[-prefix-free]](http://i44.tinypic.com/wwkgi1.jpg)
Эти префиксы необходимы для того, чтобы во браузерах работали те свойства CSS3, которые ещё не до конца стандартизированы: считается, что отдельное задание свойства для каждого из нынешних браузеров поможет в дальнейшем обойти возможное различие между нынешней реализацией свойства в каждом конкретном браузере и окончательными требованиями страндарта. Во браузере Mozilla Firefox для этой цели употребляется
На практике, однако же, автор сайта чаще всего использует своего рода «общий знаменатель» возможностей нескольких браузеров — значения свойств CSS3, работающие одинаково (или почти одинаково) во всех современных браузерах. Да и записываются все они также одинаково. Указание префиксов сводится поэтому ко многократному повторению свойств. Например, чтобы придать нескольким кнопкам
#cboxPrevious, #cboxNext, #cboxClose {
-webkit-box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
box-shadow: 0 0 6px #000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
Во-первых, это задалбывает.
Во-вторых, это неэкономично.
В-третьих, всегда существует риск забыть о необходимости указать тот или иной префикс. (В списке «How to avoid common CSS3 mistakes» эта ошибка — на первом месте.)
Поэтому рано или поздно должно было появиться
И такое средство появилось. Вот оно:
![[-prefix-free]](http://i44.tinypic.com/wwkgi1.jpg)
JavaScript → Userscripts. Углубляемся
Как упоминалось в предыдущей статье, юзерскрипты поддерживаются всеми современными браузерами. И даже кое-как поддерживаются в IE7 и выше.
В этой статье мы поговорим о браузерах:
В этой статье мы поговорим о браузерах:
- Ограничения
- Проблемы
- Расширения для запуска юзерскриптов
- Установка юзерскриптов
JavaScript → Кроссбраузерный вызов методов Flash из JavaScript
Неделю назад в одном из моих проектов возникла задача заменить существующее слайд-шоу, реализованное на JavaScript более красивым, сделанным на Flash. При минимальном изменении кода требовалось вставить флеш-ролик и наладить передачу данных и обработку событий на страничке так, чтобы она и дальше продолжала работать корректно.
Русскоязычные статьи на тему передачи данных в связке JavaScript—Flash дают общее представление о процессе, но не учитывают одну важную деталь: в разных браузерах следует использовать различные объекты для выбора флеш-ролика. Наиболее часто предлагаемое решение работает в Chrome, но отказывается работать в Firefox, и уж тем более в IE.
Ввиду неполноты большинства статей на тему передачи данных между JavaScript и Flash, я считаю целесообразным подробнее рассмотреть этот вопрос.
Русскоязычные статьи на тему передачи данных в связке JavaScript—Flash дают общее представление о процессе, но не учитывают одну важную деталь: в разных браузерах следует использовать различные объекты для выбора флеш-ролика. Наиболее часто предлагаемое решение работает в Chrome, но отказывается работать в Firefox, и уж тем более в IE.
Ввиду неполноты большинства статей на тему передачи данных между JavaScript и Flash, я считаю целесообразным подробнее рассмотреть этот вопрос.
Каскадные Таблицы Стилей → Кроссбраузерный inline-block
Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block. Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».