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

Для выполнения однотипных задач лучше всего использовать пакетные файлы, т. е. файлы которые автоматизируют работу. Например в среде DOS - BAT-файлы, в Windows - WSH (Сервер Сценариев) и т. д. Ну, а с помощью закладок любого браузера, поддерживающего протокол javascript:,можно добиться невообразимо быстрых и полезных результатов, создавая cкриптовые закладки или просто JS-закладки. После того, как вы установите первую такую закладку, я гарантирую, что ваш взгляд на блуждание по интернету (и не только) в корни изменится, разумеется в лучшую сторону.

JS-закладка, это простая закладка в браузере, которая содержит одну строчка javascript-а и использует протокол javascript:. Т. е. при активизации JS-закладки, выполняется код скрипта, а не превычная загрузка документа из интернета (протокол HTTP:, FTP: и т. д.).

Совет:
Создайте отдельную папку в «Избранном» (Favorites), и все JS-закладки устанавливайте в эту папку. После, вам будет легче соорентироваться. Также, для быстрого доступа к основным, часто используемым закладкам, можно использовать панель «Ссылки» (Links).

Первый способ установки JS-закладок:

* Откройте в браузере любой документ.
* Установите на него заклкадку (CTRL + D).
* Откройте свойства закладки и впишите в поле URL любой скрипт на javascript, например:

javascript:alert(top.location.href)

* Вас встретит выскочка-предупреждение, - согласитесь: «Да» (Yes).

Способ второй, используемый на сайте:

* Вам остается кликнуть по такой ссылке правой кнопкой мыши, и выбрать «Добавить в Избранное» (Add to Favorites).
* Или кликнуть левой кнопкой мыши и, не отпуская ее, перетащить закладку на панель «Ссылки» или в папку «Избранное».
* Опять выскочка, опять «Да».

При создании собственной закладки, помните три условия:

1. Строка скрипта должена начинаться с javascript:.
2. Максимально допустимое количество символов в строке скрипта 2048.
3. Для подстраховки, в конец скрипта добавляйте void(null), т. к. если ваш скрипт возвратит какое либо значение, то это значение перепишет открытый в этот момент документ.

Несколько JS-закладок:

* * Быстрый поиск по странице *.
Достойная замена стандартному "Find" (Ctrl+F). (для документов без фреймов, IE4+).

* * Просмотр части HTML кода *. (перед активизацией нужно отметить нужный участок документа).
Закладка очень пригодится начинающим вэб-программистам и в особенности верстальщикам, которым не придется каждый раз просматривать весь HTML-документ в поисках отдельной нужной части кода. (для документов без фреймов, IE4+).

* * Маштабируем документ *.
Подробнее о закладке и свойстве zoom смотрите статью «Свойство zoom».

Хорошо Плохо

В статье приводится список скриптов навигации с помощью закладок. Каждый вариант имеет наглядный пример с доступным для загрузки исходным кодом.

bootstrap-tabs-x – расширенный плагин закладок, построенный на основе Bootstrap Tabs . Он позволяет выравнивать закладки, переворачивать заголовки, загружать контент через AJAX , а также включает в себя некоторые другие функции.

Демо

Pure CSS Tabs with Indicator – современная, но достаточно простая библиотека закладок, построенная без использования JavaScript . Это значит, что она быстрая и красивая.

Демо

Tabby – позволяет создавать простые закладки и выводить на них любой контент, включая видео. Данный скрипт предоставляет продвинутые настройки, поддерживает NPM и Bower .

Демо

Responsive Tabbed Navigation – современная удобная навигация, созданная с использованием JS и CSS , построенная с упором на мобильные устройства и поддерживающая горизонтальное и вертикальное расположение.

Демо

Toggler – плагин, написанный на чистом JavaScript , предназначен для создания элементов-переключателей, включая аккордеоны и закладки. Также он позволяет показывать/прятать любой элемент на странице.

Демо

Pure CSS Tabs – простой пример, созданный на основе CSS и JS . Несмотря на то, что он показывает «голые » закладки, вы сможете приукрасить их, изменив CSS стили.

Демо

Tabsy CSS – библиотека, написанная на CSS , предназначенная для создания простых элементов-переключателей, таких как закладки. Она не нуждается в дополнительных ресурсах и не требует использования JavaScript .

Демо

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

Демо

Responsive Pure CSS Tabs

Демо

CSS Tabs

Демо

Tabs using Pitaya – скрипт позволяют с легкостью создавать анимированное переключение между закладками. Но нужно подключить Pitaya , которая является библиотекой и увеличивает время загрузки.

Демо

jTabs – библиотека закладок, написанная на чистом JavaScript . Это означает, что она построена без jQuery и поддерживает несколько опций настройки.

Демо

Адаптивные закладки на Flexbox

Демо

Закладки аккордеон

Демо

tabs.js – это библиотека, написанная на JavaScript . Она адаптивная, поэтому закладки меняются на аккордеон на маленьких экранах.

Демо

WellTabber – ещё один простой JavaScript-плагин , похожий на Tabby . Он поддерживает различные варианты настройки закладок. Также он позволяет показывать стрелки навигации.

Демо

3D Cube Tabbed Interface

Демо

Tabs Module for ES6

Демо

Variable Heights with CSS Tabs

Демо

Material Design Tabs – скрипт закладок, построенный с использованием Vanilla JavaScript . Он простой в использовании, но и не поддерживает расширенные опции.

Демо

Анимированные CSS-Закладки – позволяет создавать простые легковесные закладки. В отличие от Tabby или WellTabber , скрипт не предлагает расширенных настроек.

Демо

pureTabs

Демо

Vanilla JavaScript Accessible Tabs

Демо

Scifi-style Animated Tabs

Pure CSS Bootstrap Adaptive Tabs – система закладок построена исключительно с использованием CSS и без JavaScript . Уникальная функция, которую она предоставляет: закладки, не помещающиеся на экран, переносятся в выпадающий список.

Демо

Foldable Tab Bar – виджет закладок, написанный на чистом CSS3 (без использования JavaScript ), как и другие плагины в этом списке. Его делают интересным закладки, имеющие красивый эффект сворачивания.

Демо

Awesome CSS Animated Tabs

Демо

JavaScript Tabifier – продвинутый плагин закладок на JavaScript . Он позволяет устанавливать закладку по умолчанию, изменять закладку динамически и добавлять функции обратного вызова в события onLoad и onClick .

Skeleton Tabs

Демо

Tabtastic – это простой плагин для создания закладок с помощью CSS и JS . Он использует семантическую разметку, доступен для программ чтения экрана и поддерживает вложенные закладки на странице.

CSS3 & jQuery Folder Tabs – это руководство с доступным для скачивания исходным кодом рассказывает о создании закладок папок с помощью CSS3 и jQuery. Оно напоминает мне о закладках в Google Chrome .

Демо

Tabbed Content

Equal-width Navigation Tabs – пример кода, демонстрирующий использование чистого CSS для создания закладок навигации одинаковой ширины. Вы можете настроить отображение, но не дополнительные настройки.

Демо

Tabbed Content with jQuery & CSS

Демо

Twitter Bootstrap Wizard – это плагин для создания установщика с закладками. Я заметил, что он позволяет создать только закладки, скрыв или удалив кнопки «Назад » и «Далее «.

Pure CSS Tabs

Демо

Responsive CSS Tabs

Демо

Just Another CSS Tabs – прекрасно созданная структура закладок, построенная на чистом CSS , которая работает в современных браузерах . Но, в отличие от некоторых мощных плагинов, здесь нет расширенных настроек.

Демо

Responsive Accordion to Tabs – скрипт работает как аккордеон или как закладки в зависимости от ширины экрана. Он показывает закладки или аккордеон, если размер экрана слишком мал.

Демо

CardTabs – лёгкий плагин закладок, созданный на jQuery , который имеет несколько тем. Вы также можете создавать новые темы и устанавливать активную закладку динамически.

Все, кто пользуется интернетом, так или иначе хранят ссылки на ранее просмотренные страницы с интересной информацией, или, другими словами, закладки, фавориты, избранное - название зависит от используемого браузера, фантазии переводчика, и, частично, разработчика. Когда-то, в середине 90-ых, многие из нас начинали пользоваться интернетом, используя всего лишь одно доступное устройство - компьютер на работе. К концу 90-ых довольно большое количество людей начинали баловаться домашним интернетом. Устройств стало два - компьютер на работе и дома. Не знаю как у вас, но у меня уже тогда встал вопрос: а как посмотреть дома те ссылки, которые сохранил на работе, или наоборот?

К каким только ухищрениям я не прибегал. Например, делал в дереве закладок браузеров на домашнем и рабочем компьютерах папки "Work" и "Home". Да-да, по две папки в домашнем и рабочем браузере. Все закладки, создаваемые на домашнем компьютере, я помещал в папку "Home", все же создаваемые на рабочем месте - в папку "Work". Далее все происходило так: утром, собираясь на работу, я экспортировал папку "Home", полученный файл сохранял на флешку. Придя на работу, я удалял в дереве закладок рабочего браузера старую папку "Home", после чего с флешки импортировал ее новую версию. Не трудно догадаться, что я делал, когда уходил домой.

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

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

В версии 9.5 появилась новая служба, получившая название Opera Link . С ее появлением стала возможной синхронизация различной информации между браузерами на различных устройствах, включая Opera mini. Одной из составляющей синхронизируемых данных были закладки. Конечно же, я сразу зарегистрировался в этой службе и стал ею пользоваться. И пользовался успешно, долго и счастливо, пока... Пока Opera не объявила, что переходит со своего движка Presto на другой, всем известный движок - WebKit.

Может, кому-то эта новость и показалась хорошей, но я понял, что мир Opera уже не будет прежним. И действительно, начали исчезать фирменные "фичи" Opera. На самом деле, "начали" - не совсем правильное слово, все было гораздо хуже - с выходом версии 15.0 все стало просто другим. Наряду с другими полезностями исчезла и синхронизация закладок. Именно из-за этой кардинальной смены курса, версии Opera, начиная с пятнадцатой, так и не прижились у меня. На больших, назовём их так, устройствах, то есть, десктопах, ноутбуках и нетбуках я продолжаю использовать последнюю "родную" версию - 12.17, тем более, что, к счастью, Opera Link, как сервис, не был закрыт и продолжает функционировать в этой старой версии браузера. Справедливости ради отмечу, что разработчики Opera обещают вернуть синхронизацию в свой браузер. Но когда это произойдет, и как можно будет снова ею пользоваться - мне, по крайней мере, не известно.

Но жизнь не стоит на месте. Теперь, помимо "больших" устройств, у меня имеется определенное количество "маленьких" устройств - планшеты и смартфоны, в основном, на Android, но есть и под Windows 8.1. И пользоваться на всех старыми версиями Opera просто не получается. Так, на планшете Acer, с Windows 8.1 на борту, при работе в режиме пальцеориентированного ввода, я использую Internet Explorer, а на Android-ном планшете частенько использую Chrome. На работе же, поскольку большую часть времени, провожу, программируя на переносной виртуалке, приходится довольствоваться FireFox-ом, так как Chrome режется корпоративным прокси, Opera не удается (или, может, просто лень?) настроить так, чтобы все работало, а ослик на XP (а именно под этой операционкой у меня работают виртуалки) до новых версий не обновляется принципиально. И как с таким зоопарком прикажете синхронизировать закладки? А ведь их в Opera Link накопилось около двух с половиной тысяч!

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

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

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

После некоторого времени, проведённого в интернете за изучением альтернатив, список сервисов, отвечающих моим требованиям, сократился до двух. (Если быть совсем честным, то до трех, но этот третий, pinboard , не отвечает критерию бесплатности). Итак, это Google Bookmarks от Google, естественно, и Xmarks , теперь уже, от LastPass.

Все помнят мою слабость к продуктам Google? Есть у меня такой недостаток. Я стараюсь его преодолеть, но, если честно, всегда ищу какую-нибудь лазейку, чтобы отвергнуть конкурентов. Вот и сейчас, зайдя на сайт Xmarks, я придрался к необходимости устанавливать на все компьютеры дополнительное ПО, чтобы производить синхронизацию закладок из браузеров. К тому же, чтобы пользоваться этой возможностью на мобильных устройствах, надо покупать премиальную подписку. В принципе, можно пользоваться онлайн доступом, но чем он тогда лучше продукта от Google? В общем, повод был найден, хотя я и зарегистрировался в этом сервисе, чтобы позже сравнить удобство онлайн доступа сервисов.

Теперь поговорим про Google Bookmarks. Этот сервис никак не связан с закладками, которые сохраняются Chrome при синхронизации данных между браузерами на различных устройствах. Вообще, это довольно странная особенность, немного нелогичная, с моей точки зрения. Более того, для того, чтобы импортировать закладки в сервис Google, пришлось пройти длинный путь, в котором Chrome никак не участвовал. Про этот путь я сейчас немного расскажу.

Первым делом, надо экспортировать закладки из Opera. Сделать это совсем не трудно, надо только помнить, что экспортировать надо в HTML файл. Почему? Потому, что импортировать закладки в Google Bookmarks можно только при помощи Google Toolbar, а на текущий момент этот инструмент существует в актуальном состоянии только для IE. А в браузер Microsoft закладки можно импортировать из HTML файла. Неплохая складывается цепочка, правда?

Ладно, файл из Opera получен. На ноутбуке HP, с Windows 7 на борту, скачиваю Google Toolbar и устанавливаю его. Там же запускаю Internet Explorer и импортирую закладки из HTML файла. Проверяю - вот они, мои закладки, IE заботливо создал папочку Imported в Favorites и сложил их туда аккуратненько. Далее, как и предупреждала меня страничка с помощью по импорту закладок Google Toolbar , пришлось включить в настройках toolbar-а показ меню закладок. Пока, вроде, все гладко и предсказуемо. Почувствовали неладное? И правильно! Следующий шаг - выбор закладок, которые я хочу импортировать - отнял у меня значительно больше времени, чем предполагалось. И именно из-за него я и стал писать этот пост.

Так что же за проблема возникла на этом ординарном, судя по описанию, действии? Да все просто: я не мог найти именно те закладки, которые импортировал. В IE отлично их вижу, вместе со старыми закладками Explorer-а, а в списке выбора для импорта - нет!

Как честный программист, я предположил, что имеет место маленькая ошибочка в IE или в Google Toolbar-е, и решил, что ее можно подправить простыми действиями, типа, перенести импортированные закладки из папки Imported в корень Favorites или просто перегрузить Explorer - мало ли, почему они не подхватились. В общей сложности на эти, и другие, придуманные по ходу экспериментов, простые действия, выполненные по много раз в разной последовательности, я потратил, наверное, около часа. Но ничего не изменилось - я просто не видел мои импортированные закладки в списке для выбора.

Тогда я сделал то, что, наверное, стоило сделать с самого начала, я стал смотреть на закладки при помощи файлового менеджера (благо, Explorer их хранит в виде файлов в специальной папке файловой системы) более внимательно. Играли когда-нибудь в игры "найди 10 отличий на картинках"? Что-то такое пришлось проделать и тут. И я нашел!

Вот она, разница!

Расширения файлов-закладок - у родных закладок это были.url, а у импортированных - .URL. Все знают, что (по умолчанию) в Windows регистр букв в именах и расширениях файлов, роли не играет, в отличии от того же Linux. То есть, нельзя иметь в одной папке файлы с именами MyBookmark.url, mybookmark.url и mybookmark.URL - с точки зрения Windows это будет одно и то же имя файла, хотя, при создании файла, регистр букв сохраняется в точности так, как его задал пользователь.

Обремененный этим знанием, я бы не придал этому различию значения, если бы не час, проведенный перед этим в беспощадных попытках заставить Google Toolbar увидеть мои импортированные закладки. Но этот час изменил меня и я решил переименовать файлы-закладки, сделав у них расширения маленькими буквами.

Для того, чтобы это сделать, пришлось вспоминать язык командного процессора cmd. Куда тут без Google. Довольно скоро я нашел нужную мне команду . Осталось только чуть-чуть подправить пример и вот, что в результате получилось:

For /R %%d in (.) do (cd %%d && ren *.URL *.url)

Если делать командный файл (с расширением cmd), то эту строку надо просто в него скопировать. Если же запускать из командной строки, то вместо "%%" надо использовать "%". Я сделал командный файл и запустил его из подкаталога Imported каталога Favorites. Все файлы были переименованы. После этого я опять обратился к Google toolbar-у для запуска импорта закладок и в этот раз был вознагражден - все импортированные закладки были в списке для выбора. Естественно, я выбрал все, после чего они успешно импортировались в службу Google Bookmarks.

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

Первое, что надо сделать - научиться добавлять новые закладки. На самом деле, это не сложно. На странице помощи по Google Bookmarks есть bookmarklet, который решит эту задачу. Тут главное разобраться, как его добавить на соответствующий bar нужного браузера. Для десктопного Chrome и Firefox можно мышкой перетащить приведенную на указанной страничке ссылку на панель закладок. Конечно, панельку надо предварительно отобразить в этом самом браузере. В Internet Explorer-е можно воспользоваться правой клавишей мышки, щёлкнув ею на нужной ссылке, и выбрав затем в контекстном меню пункт Add to favorites. Но не буду здесь повторять то, что очень хорошо описано, например, .

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

Следующая задача - находить нужные закладки. Когда открываешь страницу сервиса Google Bookmarks в браузере, на экране появляется некоторое количество закладок и длинный список используемых меток. Отображаемые закладки можно сортировать по дате, по названию и по меткам. Не одновременно, а по отдельности. Кроме того, щёлкнув на какой-нибудь из меток, можно ограничить отображаемые закладки только теми, которые помечены этой меткой. Кроме того, есть возможность искать закладки по тексту, входящему в название, или по комбинации меток, меток и текста названия. Если есть желание найти, например, все закладки, помеченные метками JavaFX и Threads, то в строке поиска надо набрать что-то вроде:

Label:JavaFX label:Threads

Если к этой строке через пробел добавить какой-нибудь текст без префикса label, то можно получить еще и ограничение по тексту в названии:

Label:JavaFX label:Threads task

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

До планшета с Android-ом я пока не добрался, но, говорят, что в том же мобильном Chrome добавленный на toolbar закладок в десктопном браузере bookmarklet должен синхронизироваться. А если синхронизация не настроена, то можно добавить bookmarklet вручную, скопировав текст javascript-а в поле адреса создаваемой закладки. Для того, чтобы bookmarklet сработал, надо, находясь на странице, которую хочется добавить в закладки, начать набирать в адресной строке название bookmarklet-а, и выбрать его, когда он покажется в окошке с подсказками. Это что касается добавления новых закладок. Работа же со списком закладок и поиском нужных закладок не должна ничем отличаться от работы в браузере на десктопе. В теории.

Что ж, поживем - увидим...

P.S. Пока я проверял орфографию, добавлял картинки и делал еще какие-то манипуляции с текстом этого сообщения, у меня появилась возможность проверить утверждения, связанные с мобильной версией Chrome под Android. Надо сказать, что они подтвердились! Все получилось так, как и было обещано: bookmarklet я создал вручную, и использовал его для добавления закладок через набор названия. Да и в остальном теория подтвердилась практикой.

P.P.S. Хочу отметить еще одну вещь, которую открыл для себя в процессе работы над данным сообщением. Речь идет о регистро-независимости имен файлов. Оказывается, этим свойством можно управлять! В реестре Windows в ветке

HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manager\Kernel

Имеется переменная

ObCaseInsensitive (REG_DWORD)

Так вот, если значение этой переменной установить в 0, то система начнет реагировать на регистр букв в названиях имен файлов и каталогов. Воистину, век живи - век учись!

Chris Coyier.

В ходе создания панели закладок, разработчики, прежде всего, думают о написании соответствующего JavaScript кода, который работает по обычному сценарию:

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

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

Селектор псевдокласса:target .

В нашем случае основная концепция реализации такого подхода опирается на функционал CSS псевдоселектора :target , который используется в связке с селекторами идентификаторов элементов - #id . Полученный в результате сложный селектор будет работать в том случае, если в указанном URL адресе присутствует идентичное значение ID c предшествующим символом решетки # (*анкор ). То есть, если применяемый URL выглядит примерно вот так:

http://css-tricks.com/#element-id

и на странице присутствует элемент с соответствующим идентификатором id=»element-id»

header text

то этому элементу будет соответствовать следующий селектор:

#element-id:target {color: red;}

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

Link text

Поддержка CSS3 браузерами.

Обычно руководство, подобное этому заканчивается кратким перечислением браузеров поддерживающих и не поддерживающих рассмотренный в нем прием. Но в данном конкретном случае, необходимо более детально рассмотреть этот вопрос. Дело в том, что псевдокласс :target представлен последним, третьим уровнем спецификации - CSS3 и все настоящие версии популярных браузеров обеспечивают его полную поддержку. Я, конечно же как и большинство других разработчиков, придерживаюсь точки зрения, требующей прекращения поддержки браузера IE6 , и поэтому особо не переживаю о том, будет ли работать описанный выше метод в этом браузере (а он работать не будет). Но основная проблема заключается в том, что псевдокласс :target не поддерживается и в двух последующих, седьмой и восьмой версиях IE . То есть применительно к этим браузерам данное пособие можно отнести, скорее всего, к категории познавательных случаев веб-разработки, используемых исключительно в методических целях, чем к руководству по практическому использованию CSS приемов в рамках проектов масштабного использования.

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

HTML код.

Для начала рассмотрим максимально упрощенный вариант необходимой для создания панели закладок html разметки: