Eps detail html ошибок

Многие библиотеки JavaScript были разработаны для того, чтобы размещать на сайтах дополнительные интерактивные виджеты. Аналогичными средствами обладает и HTML5 . В этой статье мы рассмотрим один из таких элементов под названием ( а значит автоматически и элемент ), который дает возможность создавать интерактивные виджеты, похожие на аккордеон.

Использование и

может использоваться в любом месте в пределах тега . Вот простой пример его использования:

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

, и даже вложенные массивы других элементов .

Единственное отличие заключается в том, как браузеры отображают этот элемент. Поддерживающие его браузеры, такие как Google Chrome , Safari и последняя версия Opera выводят его с небольшим треугольником сбоку:


Элемент работает как элемент выпадающего виджета, в котором контент изначально скрыт. Кликнув по стрелке, вы можете открыть скрытый контент. Также можно выделить его с помощью клавиш Tab , Space или клавиши Enter :

Открытое состояние

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

Элемент

применяется вместе с тегом ; два элемента предназначены для совместного использования, но является необязательным.

Так что же происходит, когда вы используете его?

В приведенном выше примере надпись « Подробнее » будет заменена на « Hello World »:

Вложенные элементы

Как уже упоминалось выше, может содержать другие вложенные элементы , например:

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


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

Назначение стилей для с помощью CSS

Стили для элементов и могут задаваться так же, как и для любых других блочных элементов; выберите их с помощью селектора элемента, класса или идентификатором и создайте блок свойств, чтобы задать стиль для этих элементов:

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

Также вы можете задать стили для элемента . Например, если вы наводите курсор мыши на кнопку или ссылку, то курсор обычно приобретает вид указателя ( ладонь с вытянутым указательным пальцем ).

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

Стили маркера

А можно ли задать стили для стандартного маркера в виде маленького треугольника? Webkit использует для этой цели псевдо-элемент ::-webkit-details-marker . Благодаря этому мы можем задать для треугольника стили по умолчанию, такие как цвет, цвет фона, а также размер:

К сожалению, заменить треугольник непосредственно через ::-webkit-details-marker невозможно. Единственное работающее решение — это изменить его с помощью ::before или ::after :

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

Поддержка браузерами этих двух элементов значительно улучшилась в последние два года. В 2011 и 2012 годах единственным браузером, который мог отображать и , был Google Chrome . Safari и Opera только недавно начали поддерживать эти элементы.

Так как поддержка в Firefox и Internet Explorer до сих пор оставляет желать лучшего, появилось несколько вариантов универсализации, которые имитируют нужный функционал, например, jQuery Details . Хотя это решение и опирается на JQuery , но размер его файла намного меньше, чем аналог библиотеки JQuery UI .

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

Примеры применения

Вы уже встречались с этим элементом. Например, некоторые интернет-магазины « упаковывают » с помощью него списки желаний. Или используют его в сайдбаре, чтобы отфильтровать результаты:


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

Заключение

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

Данная публикация представляет собой перевод статьи « Explaining the “Details” and “Summary” Elements » , подготовленной дружной командой проекта Интернет-технологии.ру

Вам часто приходилось использовать JavaScript для создания виджета, показывающего и скрывающего какое-то содержимое? Возможно, для этого вы даже скачивали целую JavaScript-библиотеку? Что ж, можете радоваться: HTML5 позволяет создавать подобное всего лишь парой строчек кода, без применения JavaScript. Зависит от браузера, конечно, но мы вернёмся к этому позже. Представляем вам элемент .

Вот что о нём написано в спецификации:

Элемент details представляет собой раскрывающийся виджет, показывающий пользователю дополнительную информацию или элементы управления.

Мы можем использовать для создания «виджетов-аккордеонов», которые пользователь может разворачивать и сворачивать. Внутри этого элемента можно разместить любое содержимое.

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

Прежде чем мы продолжим, вам нужно учесть, что сейчас только Chrome поддерживает элемент . Скоро к нему присоединится и Opera, но немного костылей нам все-таки понадобится. Что ж, запускайте Chrome, и давайте смотреть.

Использование

Имеются два элемента: и необязательный . Элемент — это обёртка для содержимого, которое мы хотим показать и скрыть, а содержит описание и заголовок этой группы. Формально нам не нужен. В его отсутствие браузер подставит текст по умолчанию, например «details» в Chrome. Давайте взглянем на код:

Вы можете посмотреть это в действии на jsbin. Даже этот простой пример прекрасно демонстрирует эффект переключения. Без JavaScript!

Атрибут open

В вышеприведенном примере содержимое скрыто при загрузке страницы. Мы можем сделать его видимым по умолчанию, добавив одиночный атрибут open для , пример на jsbin:

Атрибута closed не существует. Поэтому, опуская open , вы по умолчанию подразумеваете closed .

Элемент

Мы бегло взглянули на в действии, теперь остановимся на нём подробнее. Внутри могут использоваться строчные элементы, такие как или . Для чего это может быть нужно? Например, для дополнительного оформления или, как предлагает спецификация, использования для элемента формы. По крайней мере, было бы удобно, если бы подобная конструкция работала корректно:

Теоретически, нажатие на должно раскрывать содержимое элемента . Но в этом примере содержимое не будет развернуто, потому что вы, фактически, взаимодействуете с , который переводит фокус на соответствующий — даже если он скрыт с помощью .

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

Вложенность

Вы можете помещать друг в друга, если хотите, как это сделано в следующем, вполне валидном примере:

Примеры использования

Так в каких же случаях вы можете использовать ? Первое, что приходит в голову — FAQ. Разработчики часто используют для них «аккордеоны», поэтому замечательно подходит.

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

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

из спецификации" >

Пример использования из спецификации.

На самом деле, даже глядя сейчас на админку WordPress, я вижу множество возможностей использования . Если у вас есть ещё какие-то идеи и предложения — расскажите о них в комментариях.

Оформление

Как же нам оформить эту штуку? Для элемента, раскрывающего содержимое, в WebKit вы можете использовать псевдо-элемент ::-webkit-details-marker . Небольшой пример:

Мы также можем позиционировать этот элемент по отношению к родителю. Здесь, например, он прижат к правому краю. В общем-то, и все.

А как же заменить раскрывающий элемент своей иконкой? Используя выборку по атрибуту, вы можете определить, когда раскрыт, а когда закрыт, и применить соответствующее фоновое изображение. Мы делаем примерно то же самое в этом примере, за исключением того, что вместо фонового изображения мы используем псевдо-элемент :after :

В этом примере символы + и — используются в качестве раскрывающей ссылки. В зависимости от дизайна вы можете использовать :before вместо :after , но, в любом случае, оба псевдо-элемента позволяют использование изображения.

Выборка по атрибуту details[open] скрывает в себе некоторые интересные возможности. Как хорошие HTML5-доктора, мы создали доработанный пример, показанный на этом скриншоте:

в Chrome" >

Оформленный в Chrome.

Было бы интересно (хотя это и не всегда уместно), если бы мы могли использовать CSS-трансформации для анимации разворачивания и сворачивания , но пока это невозможно.

Доступность

К сожалению, на момент написания статьи отсутствует возможность управления с помощью клавиатуры. Стив Фолкнер пишет:

Проблема в том, что на данный момент отсутствует поддержки клавиатуры и нет никакой инофрмации для обеспечения доступности.

Попробуйте сами. Если вы раскроете элемент с помощью мыши, тогда вы сможете использовать клавиатуру для навигации по вложенным элементам, но вы также должны иметь возможность открывать и закрывать с клавиатуры. Что ж, неидеально, но я уверен, что разработчики Chrome скоро с этим разберутся. Правда, ребята?

Обратная совместимость

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

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

Зачем вообще это использовать?

Конечно, дарёному коню в зубы не смотрят, но все-таки — почему этот виджет существует в HTML5? Что ж, как и в случае с другими возможностями HTML5, он просто делает нашу жизнь легче. Реализация таких элементов, как календарь, слайдер, прогресс-бар, а теперь ещё и «аккордеон», становится гораздо проще и не требует использования JavaScript. Кто знает, что будет следующим? Нативные табы? Было бы здорово 🙂

В заключение

В этой статье мы продемонстрировали, как использовать элементы и . Элемент при помощи создаёт естественный для браузера интерактивный раскрывающийся виджет.

На текущий момент работает только в Chrome, но, надеюсь, эта ситуация в скором времени изменится. Пока что мы можем использовать в CSS только ::-webkit-details-marker , но есть и множество других CSS-техник. Если у вас есть какой-либо опыт или идеи для использования элемента , расскажите об этом в комментариях.

Перевод оригинальной статьи «The details and summary elements» Тома Лидбеттера (Tom Leadbetter), опубликованной на сайте HTML5Doctor.com.

Комментарии +

  1. Лев Солнцев 29 августа 2011 в 13:10

Где-то видел, что недоступность с клавиатуры можно исправить, навесив tabindex на .

Нативно-кроссбраузерно табы можно сделать с помощью :active:hover, :focus или на CSS3 с помощью :target.

Я так понимаю главное преимущество details в том что поисковик сможет определять содержимое относящиеся к конкретному элементу, то есть связи между элементами.

Не противоречит ли данный элемент идеи разделения документа на "структура-представление-поведение"?

Т.е. html — для структуры, CSS — для визуального представления (оформление), JavaScript — для поведения.

a file file.eps that I downloaded from http://www.shutterstock.com/ , it looks like this :

to export all those icons into its own piece so that I can use them on my site.

doing this manually one-by-one it is very time-consuming, now I’m looking for a better way to export all of them.

Is there any Mac application out there that help me export/slice my file.eps into multiple icon.png file ?

Should I even need to extract them ?

  • load them on my website
  • keep minimum HTTP request
  • look awesome on retina display devices.

2 Answers 2

I’m sure there is more than one way to achieve this kind of task, but this is how I get mine done. Here are my steps :

I did that by open my file.eps in Illustrator, and go to File > Save For Web > Select PNG-8 > Save. You should see it export to your desired destination.

I load my exported file.png , and select any objects, a correspond css code should be automatically generated for me like this :

I selected multiple icons that I liked, and display them properly.

Finally, I put together my result : HERE

Оцените статью
Много толка
Добавить комментарий