Optimizator Field – блог веб разработчика » браузеры

10 CSS фишек, которые станут доступны после исчезновния IE6

YoYurec — Wed, 15 Apr 2009 16:40:57 +0000

Вольный перевод статьи «10 Cool Things We’ll Be Able To Do Once IE6 Is Dead».

Наш старый «любимый» ослик ещё жив, не смотря на повальное обновление пользователями до восьмой версии. И как только (а процент использования альтернативных браузеров всё растёт) эта доходяга наконец умрёт, мы сможем использовать такие замечательные вещи как:

1. Использование дочерних селекторов
Не нужно больше использовать дополнительные стили для потомков, отменяющие предыдущие. С CSS2 правила применяются именно на дочерний элемент, а не на всех потомков.
2. Полноценное использование 24-битных PNG
С поддержкой альфа-каналов мы сможем (наконец-то!) использовать картинки с тенями и полупрозрачностью, не переживая за корректное отображение во всех браузерах.
3. Селекторы атрибутов
Отпадает нужда использовать классы для разных видов полей ввода, вроде . Мы сможем можем стилизировать их, используя CSS2 – input[type="text"]. И даже делать выборку по значению атрибута (возможность из CSS3, поддерживается всеми современными браузерами, включая IE7)!
4. Дополнительные свойства отображения
Возможность использовать display:inline-block вместо плавающих блоков с последующем прерыванием потока clearfix‘ами или overflow:hidden.
(Для Firefox используйте display:-moz-inline-stack;)
5. Использование min-width and max-width
Чистый CSS для задания граничных размеров блока. Никаких expressions!
6. Избавление от 90% CSS хаков и причин для их использования
Что тут сказать… у ИЕ6 много глюков рендеринга про которые мы сможем забыть :)
7. Нормальное отображение аббревиатур ()
8. Предсказуемый z-index
Никакой головной боли – почему слой X находится поверх слоя Y, когда должно быть наоборот? И мыслей, что сделали что-то не так… ан-нет! всё сделано правильно, это просто баги IE.
9. Экономия времени и денег
10. Получение удовольствия от своей работы :)

Но останутся 3 вещи, которые всё ещё нельзя использовать, пока не исчезнет IE7:

CSS счётчики, добавляющие динамику
Свойтво box-sizing, позволяющее выбирать блоковую модель
Продвинутый javascript (только в IE8 есть кое-какие улучшения в скриптовом движке)

Вобщем, ждём скорейшего исчезновения недобраузеров!

Похожие статьи:

Как Internet Explorer поддерживает CSS?

YoYurec — Wed, 11 Jun 2008 08:56:09 +0000

«Никак», – быстрый ответ. А для особо любопытных – CSS Compatibility and Internet Explorer, объёмный документ из MSDN с громадным количеством сводных таблиц о поддерке IE5.0-IE8.0 тех или иных CSS селекторов, псевдоклассов…

Похожие статьи:

IETester – зоопарк браузеров для вебразработчиков!

YoYurec — Mon, 09 Jun 2008 09:35:38 +0000

Вёрстка сайтов не такое уж и сложное дело… если бы не одно НО, которое называется Internet Explorer :)

Проверять как выглядит сайт под разными версиями этого «браузера» довольно сложно. Кто пользуется веб-сервисами, кто standalone версиями, а кто и просто бегает к соседу с просьбой «а ну-ка открой свой седьмой»…знакомо?

С лёгкой подачи WebWorkerDaily представляю вам IETester – бесплатная утилита, которая облегчит нам жизнь. С помощью этого браузера вы сможете просматривать сайт в IE5.5, IE6, IE7 и IE8 beta1 !!!

UPD:
Программа хороша! но ещё немного сыроватая, о чем ниже…
В процессе тестов оказалось ей нужен 7-й IE для рендеринга страницы во всех заявленных версиях. На свой страх и риск таки поставил его (хотя до этого использовал IE6+PortableIE7). Даже рад этому – всё-таки седьмая версия сейчас «основная».
Пока что полёт нормальный, но случайным образом вылетает браузер – и самое интересное не понятно как лечить :). Практикую «вылетело-запустил заново» – и так до победы. Обычно хватает пару раз. Закономерности не заметил, но на оф.форуме пишут, что крашится при открытии IE6 в первой закладке… В принципе я доволен, а надежда на новые неглючные версии добавляет оптимизма :)

UPD2: Танцы с бубном показали, что открытие закладок в порядке убывания версий (8,7,6,5) добавляет стабильности :)
Во время недавней вёрстки интернет-магазина (а вы сами понимаете они не просты) особых нареканий не было, браузеры работали гладко. Жаль только отсутствует меню «открыть» – адрес подопытной странички приходится вставлять из буфера.
Из новенького – работают «conditional comments» для IE (хотя некоторые сомневались).

Похожие статьи:

Открытие ссылок в новом или всплывающём окне

YoYurec — Fri, 17 Mar 2006 17:24:59 +0000

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

В наши дни вместо того, чтобы пользователям самим позволять выбирать поведение – открыть ссылку в отдельном окне или нет – до сих пор хотят данного функционала. Всё бы хорошо, но в XHTML strict использование атрибута ‘target=»_blank»‘ не является валидным :(

Употребление кода типа href="javascript:" или href="#" onclick= для всплывающих окон нам не подходит изначально – т.к. протокола javascript: нет, а # вообще никуда не ведёт – в любом случае при отключенном javascript пользователь окажется в неприятном положении :(

Итак, усовершенствуем ссылки…

XHTML Всплывающие окна (popups)

<a href="popup.html" rel="popup|400|200">Всплывающее окно</a>

где указываем нужные размеры – (‘popup|высота|ширина’)

Внешние ссылки (в новом окне)

<a href="http://en.wikipedia.org/wiki/City_Road" rel="external">Внешняя ссылка</a>

Ну вот – так немного красивее! Мы получили реальные ссылки, вот только появился незнакомый атрибут «rel» – сокращение от ‘relationship’, который определяет отношения документа в ссылке с текущей страницей (W3C). Его-то мы и можем применить с пользой для себя.

Конечно же браузер не знает что делать с атрибутом, поэтому нам потребуется JavaScript. Он будет представлять собой вариант из двух отдельных скриптов (Kevin’s XHTML Compliant Target, Mike Rainey’s Dynamic Popups) с добавлением иконок.

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

Что же делает скрипт?

Функция — windowLinks() — помещает все ссылки на странице в рабочий массив
Начинает искать в массиве ссылки с атрибутом rel
Если находит rel со значением ‘external’, то используя DOM меняет значение атрибута target на ‘_blank’ (зачем? а затем, что в отличие от XHTML – в спецификации DOM он не запрещён!).
Добавляется всплывающая подсказка, информирующая пользователя о поведении ссылки
Также добавляется CSS класс (.external), который позволяет визуально определить по иконке внешнюю ссылку

Если же скрипт находит ‘|’ внутри rel, он использует разделитель для разбиения строки на три части – ‘popup‘, ширина и высота нашего всплывающего окна.
…помещает эти данные в стандартную функцию acpopup();
Добавляется всплывающая подсказка
Также добавляется CSS класс .popup, который позволяет визуально определить по иконке внешнюю ссылку
и сам запуск функции windowLinks().

CSS:

.external {
	font-weight:bold;
	background :transparent url(ext.gif) no-repeat right center;
	padding-right:12px;
}
.popup {
	font-weight:bold;
	background :transparent url(pop.gif) no-repeat right center;
	padding-right:12px;
}

В итоге получим:

Пример »

Скачать »

(перевод статьи New Windows and Usability: the Theory of ‘REL-ativity’)

Похожие статьи:

Плагины под Firefox

YoYurec — Mon, 13 Jun 2005 17:52:58 +0000

Чем мне нравится этот браузер (кроме того, что поддерживает нормально CSS, в отличие от IE), так это возможностью подключать расширения! Т.е. из десятков, а то и сотен плагинов (предваритьельно выбрав нужные) можно сделать из Firefox’a канфэтку.

Ниже в произвольном порядке (но сгруппированые) описания тех плагинов, на которых я остановился, активно использую и радуюсь жизни :)

UPD: 21.04.2006

Block:

AdBlock – фильтрация рекламы;
Flashblock – блокировка флеш, при необходимости можно нажать на картинку и флешка подгрузится;

Tabs:

SessionSaver – сохраняет сессию табов, восстанавливает открытые странички при краше браузера;
Tab Mix Plus – куча настоек для табов: возможность таскать мышкой, строка прогресса на кажном табе, разные виды фокусировки при открыти/закрытии таба, помечает непрочитанные табы, добавляет «undo close tab», и много ещё чего;
Colorful Tabs – самый бесполезный планин – разукрашивайт табы разными цветами :);

Sidebar:

XpointSidebar – сайдбар-менеджер «Избранного» на форуме xpoint.ru;
All-in-One Sidebar – позволяет окрывать в сайбаре список закачек, список расширений, список тем, закладки, историю просмотра;
TechnoBar – по данным Technorati.com показывает кто из блоггеров ссылается на текущую страничку
FlickrFox
– позволяет просматривать фото с Flickr в сайдбаре

Feed&RSS:

Sage – удобнейшая RSS читалка!;
FeedView – при клике на RSS-ссылку сразу выводит фиды, применяя стили;
LiveLines – позволяет при помощи RSS-иконки в тулбаре добавлять фид не в LiveBookmarks, а в ваш любимый фидридер, онлайновый или «программный»;

Interface:

Tiny Menu – заменяет главное меню в одну удобную кнопочку, позволяя сэкономить кучу места!

Extended Statusbar – статусбар с отображением скорости, процентажа, времени и размером загружаемого (как в Опере);
Extended Link Properties – показывает в свойствах линка на файл размер файла и др. полезную информацию;
RetroFind – убирает search panel, которая появилась в Firefox 1.0, возвращает старый добрый поисковый диалог(но панель тоже ставляет, она доступна когда делашь livesearch, т.е. находясь на страничке начинашь набирать нужное слово без вызова диалога поиска по Ctrl+F). На любителя – панель заметно лучше тем, что в ней есть highlight, а диалог тем, что он умеет искать в textarea.
RightEncoding – позволяет выставлять кодировку страницы не через View->Encoding, а через контекстное меню (как я мечтал об этом!);
Super DragAndGo – выделите и перетищите текст куда-нибудь на страничке и если это URL, то откроется в новом табе, иначе откроет эту фразу в поисковике;

Preferences:

PrefBar – создаёт панельку быстрого доступа к настройкам: images, popups, java, js, proxies;
Fasterfox – ускоряет работу браузера, устанавливая оптимальные настройки;

WebDev:

Web Developer – отключение(CSS, cookies,js, images,…) подсветка(таблиц, блоков),
работа с формами, картинками, инфа(sizes, id&classes, cookies,…);
IE Tab – позволяет просматривать страничку в закладке в помощью IE;
Opera View – для просмотра в Operе;
HTML Validator – «валидатор» проверяет правильность кода, встраивается в браузер. хотя всё равно прогнать на W3C надо – всплывёт ещё несколько ошибок;
Aardvark – Предлагаетудобные инструменты для < рентгена> страничек:
* выделяет рамкой блок, под курсором
* подсказка с типом элемента, его классом и идентификатором
* возможность удалять блоки
* обнулять свойства color и background для блока, делая чёрный текст на белом фоне
* присваивать фону элемента случайный цвет
* просматривать XHTML-код выделенного блока;
DevBoi – похож на DevEdge sidebar – удобное отображение документации в сайдбаре по HTML, CSS, DOM, XUL;
ColorZilla – «пипетка», zoom, линейка, DOM-inspector;
FireBug – вспомогательный плагин для дебаггинга Javascript, DHTML, и Ajax. Фичи: XMLHttpRequest Spy (просмотр запросов «на лету», по умолчанию выключен – в настройках выберите «Log Each Request») и их протоколирование, отдельный список ошибок для каждого сайта(а не кучей как в стандартном), индикатор ошибок JavaScript с статусбаре;
View Source Chart – Выводит цветную схему странички с исходным кодом. Конечно вы можете воспользоваться, например, WebDeveloper > Outline > Block Level Elements, но это совсем не то. Можно сворачиватьразворачивать теги;
View formatted source – Добавляет полезные «фичи» во время просмотра кода странички. С помощью него можно смотреть какие именно CSS стили присвоены элементу, просматривать картинки в исходнике, добавлять комментарии, смотреть исходник только выделеннго блочного элемента, сворачивать и разворачивать код.

PageSave:

ScrapBook – для ручного сохранения страниц на винте, чрезвычайно удобная вещь;
ScreenGrab – сохраняет всю! страничку как PNG;

Booksmarks:

Flat Bookmark Editing – позволяет редактирокать закладки без открытия окна «свойства»;
BookmarksSynchronizer – позволяет сохранять закладки на серваке и синхронизировать их. Может сохранять по закрытию браузера, а по открытию скачивать!;
del.icio.us – добавляет функционала для удобной работы с этими известными социальными закладками;
Foxylicious – основан на вышеописанном BookmarksSynchronizer’е, с тем лишь отличием, что позволяет синхронизировать del.icio.us в закладки FF!

Работа с плагинами:

Mass Installer – позволяет устанавливать несколько плагинов одновременно, польза очевидна.
InfoLister – создаёт HTML или TXT список из установленных плагинов и тем, который можно скормить Mass Installer’у! :)
Nightly Tester Tools – Делает расширения совместимыми с версиями Firefox, для которых они не предназначались;
Update Notifier – Когда у плагина или темы Firefox появляется обновление, выводит уведомление об этом событии, а также позволяет устанавливать появившиеся обновления автоматически;

Other:

MinimizeToTray – позволяет сварачивать браузер и почтовик в трей;
Greasemonkey – позволяет устанавливать пользовательские скрипты, которые увеличивают функционал страничек;
Gmail Manager – менеджер почтовых аккаунтов Gmail и оповещение о новых письмах;
Performancing – плагин для удобного блоггинга прямо из браузера, нажмите F8 – и вперёд!
Deepest Sender – ещё один плагин для блоггинга

Каталог всех расширений по алфавиту.

Похожие статьи: