Метка «css» - 24

Про БЭМ (методология написания CSS от ЯндексБлок__Элемент_Модификатор ← наиболее правильная запись расшифровки) нынче можно услышать на каждом шагу. Дело оказалось благим и покатилось по миру. Яндекс даже полез в W3C (связано это или нет — не знаю, но надеюсь, что да).

Думаю многие, кто ещё не пробовал, но прочитал описание БЭМ, задаются справедливым вопросом: «какая практическая польза от всего этого действа?» На самом деле, не смотря на то самое развёрнутое описание, конкретно уловить основную «фишку» довольно сложно. Описано конечно много плюсов и общее ощущение от методологии положительное, и кажется, что вроде как и не плохо бы попробовать, но нехватает чего-то конкретного. Прямо вот примера на живом что ли. Вот у меня сайт, вот вёрстка не по БЭМ, почему я должен всё менять? Особенно, если учесть тот факт, что БЭМ в принципе отметает все селекторы кроме классов, неужто за это время столько умных мужей в W3C не осознали, что всё настолько неправильно?

За сим возьму на себя смелость привести несколько примеров с которыми вы (конечно если вы каким-то образом связаны с вёрсткой) сталкиваетесь, не побоюсь этого слова, ежедневно. И что изменится в таких ситуациях если бы вёрстка была изначально выполнена в БЭМ.Читать полностью »

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

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

Я был уверен, что существует хотя бы одна ситуация, когда можно не опасаться никаких засад и приколов: мы всегда можем обернуть фрагмент обычного текста обыкновенным DIV-ом (display:block; и float:none;) и быть уверенными, что наш текст останется внутри него:

<DIV>
Этот текст никогда не выйдет за пределы обычного DIV-а!
</DIV>

Но на самом деле нет пределов в этом жестоком мире браузерного маразма…
Читать полностью »

Сегодня я расскажу о том, как можно быстро и легко сделать стили, которые генерируются сами по себе. Итак начнем.

Читать полностью »

Все мы привыкли через JavaScript пользоваться встроенными стилями элемента. При этом люди не подозревают, что тем самым делают себе плохо в дальнейшем. Внешние стили (подключенные через элемент style) имеют значительно больше возможностей чем встроенные стили DOM элемента.

Читать полностью »

Хочу поделиться с вами моим последним проектом.

Примерно год назад я скачал приложение Aelios Weather на iPad.
Оно задело мне глаз своей простотой и необычным интерфейсом.

И вот что получилось:
image

Смотреть тут

Как всегда, мне было интересно, насколько продвинут HTML5, и можно ли создать что-нибудь такое же.

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

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

Читать полностью »

HTML5 Canvas — элемент созданный для создания динамической графики на WebGL или обычном 2D контексте. Однако Canvas можно (и можно будет) использовать в браузерах в качестве фона CSS. Это мы рассмотрим в этой статье.

Эта небольшая статья делалась с упором на кроссбраузерность и стандарт W3C (CSS4 Images). На сегодняшний момент это можно использовать в браузерах: Mozilla Firefox, Safari, Google Chrome и прочих браузерах, поддерживающие -webkit-canvas, element или -moz-element в фонах CSS.

Эта идея нигде не была своровона — она тщательно продумана мной. Является дополнением к уже существующим темам о CSS, однако она касается и темы JavaScript в частности.

Читать полностью »

phpstorm

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

  • Новый анализатор типов — меньше неверных предупреждений без дополнительных аннотаций
  • Больше предупреждений о runtime errors прямо в редакторе
  • Больше подсветки неиспрользуемого кода и конструкций
  • Панель сущностей MVC-фреймворков — пока Symfony 2 и yii, остальные по мере готовности
  • Прозрачная поддержка PHAR
  • Поддержка callbacks в литералах (call_user_func, etc) — включая поиск использования и рефакторинг
  • Серезные улучшения консоли БД — для всех баз данных — рефакторинг, экспорт, процедуры
  • Форматирование кода по стандартам PSR1/2, Symfony, Drupal
  • LiveEdit — редактирование PHP/HTML/CSS/JS видно в браузере в реальном времени без перезагрузки страницы
  • Серезно улучшена поддержка CSS/SASS/SCSS/LESS — анализ, дополнение, форматирование
  • Поддержка шаблонов Jade

Читать полностью »

в 11:34, , рубрики: css, метки:

Мы не редко пользуемся окнами в стиле. Они нередко реализуются на JavaScript и даже на Flash. Я покажу как сделать можно одиночное окно на чистом CSS.

Читать полностью »

Коллекция паттернов поведения для элементов отзывчивого веб дизайнаДумаю любому современному дизайнеру или верстальщику рано или поздно в голову приходила мысль «А почему бы на этом проекте не использовать принципы отзывчевого веб-дизайна?». Пожалуй, сложно найти человека, который не слышал о responsive design в наше время, когда сёрфить веб могут с телефона, микроволновки и тапочек. Приступая к работе над подобным проектом, неплохо было бы иметь под рукой примеры возможного поведения лейаута и его отдельных элементов.
Читать полностью »

О практических применениях свойства float
Каждый хороший верстальщик скажет, что только безукоризненное знание собственной работы способно принести позитивные результаты. Собственные наблюдения привели меня к выводу, что не только начинающие верстальщики не совсем понимают сути применения свойства float. На Хабре просмотрел имеющиеся публикации на данную тематику. Появилось желание поделиться некоторыми замечаниями и практическими применениями данного свойства. Приведенные ниже разъяснения в большинстве своем могут стать полезными для начинающего верстальщика.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js