Блог web-разработчика: программирование JavaScript/jQuery, верстка HTML и CSS

Проблемы с HTML5 audio в нативном браузере Android 4.x.x

Belyash

19 апреля 2014

Нужно было реализовать простейшее воспроизведение аудио с кастомными контролами в основных мобильных браузерах (iOS, Android 3+, Blackberry, WP8). В процессе у меня возникли еще пару хотелок:

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

Казалось бы, что может быть проще, ведь целевые браузеры поддерживают HTML5 Audio? Казалось, что проблемы возникнут с WP8 из-за магии двух букв «IE».. Зря взял на себя грех, но в WP8 завелось с первого разу, также как и в iOS, Blackberry и … Нет, на некоторых Android девайсах начались проблемы, а какие именно я расскажу ниже.

Continue reading →

Простой подсчет количества DOM-элементов без JavaScript

Belyash

1 октября 2013

Сидел я тут ночью и помогал верстать один хороший проект… Нужно было заверстать нумерованный список, но как обычно нужно стилизовать вывод чисел у каждого пункта. Вспомнил про content-counter… И тут меня осенило — «Это ж отличный цикл на чистом CSS!».

Continue reading →

Картинки с обтеканием в контексте

Belyash

4 мая 2013

Если в тексте возникает желание вставить картинку, которую должен обтекать текст, то вставляйте ее внутрь параграфа, а всем параграфам допишите свойство clear: both;. Тогда следующий параграф не будет обтекать эту флоатящуюся картинку и ломать красоту.

screen_04.05.13__3_29

Continue reading →

Раскладка клавиатуры для Photoshop

Belyash

10 апреля 2013

Немалое количество времени моей жизни проходит в процессе верстки макетов, с которыми очень удобно работать в Adobe Photoshop. Со временем, наверное, у каждого верстальщика и дизайнера «тыкание мышкой» в панель тулбара фотошопа заменяется хоткеями, и жизнь без горячих клавиш начинает казаться невозможной.

И вот сегодня в одной социальной сети увидел вот такую полезную картинку с хоткеями для Photoshop:
Раскладка клавиатуры в Photoshop

Очистка потока

Belyash

7 апреля 2013

При использовании плавающих блоков(float: left/right) в потоке вывода могут возникнуть проблемы: родительский блок схлопывается и теряет высоту, остальные блоки начинают обтекать плавающие блоки.

В таких случаях производят «очистку потока». Есть несколько подходов к решению задачи:

блочный элемент со свойством clear: both; в конце родительского блока;
сделать плавающим блок-родитель;
overflow:hidden; для блока-родителя

Хочу предложить еще один вариант: для очистки потока родительскому блоку задать display: table;. Чтобы симулировать поведение подобное блочному элементу, необходимо задать ширину в 100%, в результате имеем:

.cleared {
    display: table;
    padding: 0; /* можно попробовать box-sizing */
    width: 100%;
}

Конечно, этот способ как и остальные имеет свою проблему — приходится обнулять боковые padding’и либо использовать box-sizing(bad for old IE).

Но у него есть свои неоспоримые преимущества:

нет необходимости во вспомогательных блоках;
родитель не «плавает»
контент можно позиционировать за границами блока-родителя.

Всплывающее окно авторизации (мини jQuery-плагин)

Belyash

1 мая 2012

jQuery Login Popup

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

Особенности:

показ/скрытие окна при клике по ссылке (target, обычно «войти»);
скрытие окна при клике вне его области;
скрытие окна при клике по крестику;
скрытие по нажатию Escape;
~30 строк коду.

Continue reading →

Кроссбраузерный CSS3 градиент

Belyash

15 апреля 2012

CSS3 linear-gradient

Когда дизайнер передает Вам макет, он зачастую не думает о том, как Вы будите это верстать, ему лишь необходимо, чтобы это максимально одинаково выглядело во всех популярных браузерах, включая Internet Explorer. Одним из камней преткновения при верстке являются градиенты, собственно в этом посте я хотел бы поделится способом решения данной задачи.

Сразу хочу оговорится, что в статье пойдет речь про линейные градиенты, не затрагивая более сложные радиальные.
Continue reading →

Тень с помощью CSS3 (box-shadow)

Belyash

11 сентября 2011

Очередная вкусняшка в CSS3 — свойство box-shadow, благодаря которому мы можем настроить отбрасываемую и внутреннюю тень для блочных элементов, не прибегаю к гуглению и поиску «1000 и 1 способ отбросить тень». Я не буду вдаваться в подробности кроссбраузерности данного атрибута, лишь попытаюсь показать как этим пользоваться.
Continue reading →

Поддержка HTML5 в Internet Explorer

Belyash

18 апреля 2011

Майкрософт уже сейчас предлагает скачать и установить новый Internet Explorer 9 с ~~частичной~~ поддержкой HTML5. Казалось бы мир стал лучше и майкрософт идет в ногу со временем, но, к сожалению, в сети еще преобладают пользователи со старыми версиями браузера от мелкомягких, в том числе бессмертный Internet Explorer 6.

Поскольку технологии не стоят на месте и консорциум w3c «призвал» разработчиков уже сейчас начать использование HTML5, для IE, который тупо игнорирует применение стилей к новым тегам HTML5 появился «хороший» хак — минискрипт HTML5 shiv.

Для того, чтобы приучить Internet Explorer понимать новый HTML5 необходимо всего лишь подключить на странице скрипт:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

<!--[if IE]>
<script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
</script>
<![endif]-->

PS: поскольку это пока единственный скрипт, позволяющий IE понимать новый синтаксис, и многие разработчики включают в код ссылку на googlecode, велика вероятность что скрипт уже закэширован в браузере пользователя.