Leaderboard

Достаточно недавно начал изучать CSS-HTML, считаю что в дальнейшем когда выйдет CSS4 и т.д. Возможно многое уже можно будет сделать без JS, на данный момент пока получается вот так. http://codepen.io/Maseone/pen/AgnJo - Собственно DEMO!

Меню это не список. Если это являет собой навигацию по сайту, то это тег nav и внутри него могут быть ссылки <nav> <a href="#">Главная</a> <a href="#">О компании</a> <a href="#">Новости</a> <a href="#">Каталог</a> </nav> Само собой ссылки можно обвернуть в div, например, который не имеет никакого семантического веса, если без этого невозможно реализовать какие-то дизайнерские выверты. Да, раньше это делалось списками. Но только потому, что более подходящей альтернативы не было. Но это, на самом деле, не список, совсем. Ссылки списком могут быть, в тексте, к примеру, перечисления использованных источников. Но в то же время это уже и не навигация по сайту, да и вообще не навигация как таковая. По этому в такой ситуации это будет списком. Слайдер это не список. Вообще это какое-то за уши притянутое понятие "список слайдов" или "перечисление слайдов". Это просто слайды. Каждый слайд представляет абсолютно законченную и независимую сущность. Я могу взять выдернуть любой слайд и слайдера и смотреть на него и он не будет требовать для себя каких-то дополнительных объяснений. Так же как и сам слайдер не потеряет смысла абсолютно, без пропавшего слайда. Единственный случай, который по быстрому всплывает в голове, когда возможно нужна какая-то связная структуризация это в каких-нибудь пошаговый слайдерах, ну к примеру презентация. Своего рода тоже ведь слайдер, но он имеет относительно четкую структуру, строгость порядка слайдов, их нумерацию, название т.п. служебная информация. Но если выдернуть слайд или перемешать их, идея презентации может пропасть вовсе. Ну по крайней мере просто каруселька с котиками, рекламными предложениями, баннерами и с другими самодостаточными данными это не список. А вот что-то связное, как в примере выше, возможно и требует какой-то отдельной структуризации. "Список новостей" (я так понял имеется ввиду лента новостей) -- ну снова таки, каждый новостной пост, самодостаточен. Проблема открыта, описана, закрыта. Все. Да бывает когда одна новость ссылается на другую, но это, так скажем, символическая ссылка. Абсолютно не имеет значение где находится одна новость относительно другой в выдаче. Вот меня заинтересовала новость о миграции тушканчиков, я ее беру и читаю. При этом мне не важно, что в Мексике ураган, а на Киев упал метеорит. Меня интересует насколько успешно мигрировали тушканчики. Так, что это ни разу не список. Каждый новостной пост можно оформить в тег article. "Список отзывов клиентов на лендинге" -- отзывы принципиально то же самое, что и комментарии. Что такое комментарий? Это, как правило, четко сформулированная (ну да да не всегда люди четко формулируют свои мысли) мысль либо вопрос, относительно поста/товара/новости etc. С одной стороны комментарий представляет самодостаточную сущность, но не совсем. Комментарий довольно жестко привязан к посту. По этому сам пост оформляем в тег section, а внутри после содержимого поста создаем блок комментариев, в котором каждый комментарий оформляется тегом article. И все. Тем самым формально мы связываем пост и комментарии. Но при этом я могу удалить комментарий и ничего от этого по смыслу не изменится. Я могу с тем же успехом менять их порядок. Могут быть комментарии к комментариям, по такому же принципу вкладываем комментарии. Так мы получаем структурированное дерево комментариев. С четкими связями там где это нужно. Так, что применение article - да, организация узлов и дочерних им потоков комментариев - да. Списки - нет, не клеится оно тут. Потому что это не перечисление. Что может быть списком, к примеру, я хочу собрать компьютер с нуля. Для этого мне нужны такие комплектующие: Материнская плата Процессор ОЗУ HDD Блок питания Видеокарта Кейс Это список необходимых, либо уже выбранных, товаров. Я могу менять их порядок (поэтому ненумерованный список), но я не могу ничего из этого убрать (грубо говоря). Иначе у меня не получится собрать компьютер. А вот когда ищу в магазине материнскую плату, то результат поиска уже не будет списком. Ибо там можно и убрать что-то и добавить, и посмотреть на конкретный товар, при этом мы ничего не заденем. P.S. Все выше сказанное является моим пониманием всего этого добра и трактовкой описаний некоторых элементов HTML5. Со мной можно соглашаться, можно не соглашаться. Это ваше право, я ничего не навязываю, никому. По скольку вся эта тема весьма мутная, на самом деле. Новые элементы html имеют достаточно расплывчатое описание. А те же списки, так уж исторически сложилось, долгое время приходилось применять там где это совсем не нужно, но другого выхода не было. Так, что как-то вот так

В спеке есть такое Отсюда лично я вывожу для себя правило, что если у последовательных сущностей есть заголовки, то они, скорее всего, не список. Обычные разделы документа (напр. главы в книге) мы же в список не заворачиваем — так и здесь. Еще одно правило я вывел, когда понял, что дефолтное браузерное оформление HTML-элементов — не зло, с которым нужно всеми силами бороться, а хорошая подсказка по их использованию. Если вид элемента с дефолтными стилями не помогает пользователю, а только запутывает его — скорее всего элемент выбран не по назначению. Если что-то будет выглядеть нелепо с дефолтными кружками-буллетами — скорее всего, это что-то не список по природе. Если список настоящий, ему и с буллетами хорошо. Исключение, на мой взгляд — сущности, явно отсортированные по опред. параметру (напр. товары в каталоге, упорядоченные по цене или по рейтингу). Там уместен упорядоченный же список ol (и дефолтная нумерация беды не сделает).

де@Zverushka, вообще-то Опера 12.16 не обновляется на новую версия, пока что, автоматически. по этому и сидят.

вместо opacity дла родительского блока используйте background-color: rgba(); Вернее в вашем случае цвета для linear-gradient нужно задавать через rgba http://cssdeck.com/labs/ip5y5yp7

использовать rgba

Или http://simplefocus.com/flowtype/

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

width, height.

Как я считаю, могу и ошибаться, веб-программисты делятся на 2 типа - front-end и back-end. Фроненд - отвечает за то, что программируется непосредственно на стороне клиента, то есть в браузере. Это html, css javascript и др. скрипты. Верстальщик - начинающий front-end Backend - программирование на стороне сервера - серверные языки и технологии (php, perl итп, базы данных - mysql). Еще есть универсалы, которые знают и умеют обе эти вещи).... Кстати программирование back-end поскучнее будет - ты не увидишь особого результата, красивой картинки и динамики, в то время как front-end непрывно программирует какие-то красивости и динамики и каждый результат своей деятельности - сайт, он видит воочию и соотвественно получает больше морального удовлетворения от готового продукта, на мой взгляд.

Ты помнишь что такое диафильмы? проектор, в котором меняются слайды (на пленке). спрайты - похоже. есть видимая область(экран), в проектор мы вставляем диафильм(в элемент мы фоном вставляем картинку с множеством изображений ), быстро тянем диафильм в нужную сторону(используем при наведении background-position, положительный и отрицательный). смысл в том что при быстром смене положения, глаз видит другое изображение, но носитель один, только его положение изменилось. А видите вы только тот, кусок, который попадает в видимую область... я понятно объясняю))

http://habrahabr.ru/post/159027/ http://webo.in/articles/habrahabr/08-all-about-css-sprites/

Да чего там понимать? Все иконки, например, засовываются в один файл-спрайт, этот файл задаётся в качестве фона какому-нибудь слою, меняете позицию фона — меняете иконку. Пример набросал здесь: http://jsfiddle.net/hypnocolor/6aQvy/. По клику на кнопку рандомно меняется позиция бэкграунда, при наведении курсора на слой можно увидеть, как переместилась фоновая картинка.

спросите Google

почитайте про background-position на htmlbоok.ru

изображение пример его использования jsfiddle.net/spdif/K8nMj/4/