Comments 54
div[class*="embossed"]
Не учите такому никого.
+6
div[class^="embossed"]
Потому что важно выделить элементы, у которых им класса начинается с «embossed».
-4
Я прекрасно понимаю что это означает, только вот чем плох вариант всем элементам добавить класс .embossed? Ни дай бог такое кто-то себе скопирует и привыкнет использовать.
+4
UFO just landed and posted this here
Пруфлинк на рефлоуметр в студию.
0
UFO just landed and posted this here
Я тоже мерил: marow.net/archives/95
В БЭМ кстати нет упоминаний про такую запись селекторов атрибутов!
В БЭМ кстати нет упоминаний про такую запись селекторов атрибутов!
+1
UFO just landed and posted this here
Сомнения — не аргумент.
0
UFO just landed and posted this here
Аналогично. Прежде утверждений о низкой эффективности селектора подтвердите свои слова ссылкой. В противном случае, нет ни одной причины отказываться от указанного метода.
0
UFO just landed and posted this here
Какие? Какие аргументы? Ссылка на блог яндекса? Там и упоминаний то нет касательно темы нашего спора.
Для себя я давно решил, что при грамотном использовании ни универсальный селектор, ни селекторы атрибутов не несут никакого вреда. Всё остальное — домыслы и предрассудки.
Для себя я давно решил, что при грамотном использовании ни универсальный селектор, ни селекторы атрибутов не несут никакого вреда. Всё остальное — домыслы и предрассудки.
+1
UFO just landed and posted this here
Экономите время — не пишите комментарии. Тем более, если не разбираетесь в предмете.
+2
UFO just landed and posted this here
Селектор класса: test.marow.net/testselectors/class.html?reflow-meter
Селектор атрибута: test.marow.net/testselectors/attr.html?reflow-meter
По 5000 элементов.
Селектор атрибута: test.marow.net/testselectors/attr.html?reflow-meter
По 5000 элементов.
0
То, что описано по вашей ссылке marow.net/archives/95 и запись div[class*=«embossed»] — это совершенно разные вещи. В вашей статье всё написано верно, но это никак не относится к данному селектору.
ИМХО этот селектор работает медленно, потому что по нему невозможно построить индекс. Этот запрос аналогичен запросу в MySQL LIKE '%embossed%'. Хотя я свято верю, что по классам индекс построен.
Простой спид-тест: выборка 1000*N раз сделать селектор div[class*=«embossed»] и div.embossed мне показывал разницу в три раза на небольшом DOM-дереве.
Для однократной отрисовки страницы это не страшно.
Однако если ваше js — приложение использует такие же селекторы — это уже может сказаться.
Вот.
ИМХО этот селектор работает медленно, потому что по нему невозможно построить индекс. Этот запрос аналогичен запросу в MySQL LIKE '%embossed%'. Хотя я свято верю, что по классам индекс построен.
Простой спид-тест: выборка 1000*N раз сделать селектор div[class*=«embossed»] и div.embossed мне показывал разницу в три раза на небольшом DOM-дереве.
Для однократной отрисовки страницы это не страшно.
Однако если ваше js — приложение использует такие же селекторы — это уже может сказаться.
Вот.
0
UFO just landed and posted this here
Кратко, ясно, понятно.
+1
Пункт «Красивые кнопочки» с текстом
![](https://habrastorage.org/r/w780q1/storage2/dab/810/a0f/dab810a0f34c246269b6fb5be1d99e53.jpg)
И стилями
Как-то немного диссонируют, поскольку Embossed это стиль визуализации, а Тени это стиль технической реализации.
![](https://habrastorage.org/storage2/dab/810/a0f/dab810a0f34c246269b6fb5be1d99e53.jpg)
И стилями
- CSS с тенями,
- CSS с третьим эффектом
Как-то немного диссонируют, поскольку Embossed это стиль визуализации, а Тени это стиль технической реализации.
0
UFO just landed and posted this here
Было бы хорошо иметь еще ссылок на подобные кирпичики для проектов.
+1
Only Line Input порадовал — изящно.
+1
![image](https://habrastorage.org/storage2/f14/fe8/5b9/f14fe85b9a88b8ce6b04c59e1e105ff2.jpg)
Никому не советую так выделять ссылки, только андерлайном. Пунктирной линией лучше обозначать текстовые кнопки, работающие на скриптах и не перекидывающие пользователей на другие страницы.
+16
+, если уж на то пошло, то в CSS3 есть "text-decoration-style". Да и в других примерах код криво написан. К примеру, «Metro Styles». Там при клике (селектор ".metro.three-d:active") свойство «box-shadow» обретает знаечение «none», но при этом остальные свойства анимируются. В итоге получается некрасиво. В html5 приняли "#top" прописывать ссылки тем элементам, что должны вести вверх страницы, в примере же просто "#", да и то, зачем она там? Кликнул и отправился куда-то при том, что просто хотел эффект при клике глянуть… В общем, вроде как и статья начального уровня, так и примеры из той же серии… Чему люди-то после сего научатся?..
0
Статья хорошая, спасибо, но все-таки выскажусь. Я видел большое количество сайтов с качественными примерами, и все они говорили, что облегчают мой труд как верстальщика, но написать что-то используя css3 я могу и сам, от таких сайтов, обычно, я жду готовый реализаций для браузеров >IE7, так как именно на это я трачу огромное количество своего времени, именно этот код я не хочу писать ручками, а хочу скопировать.
Так и в этой статье. Я увижу элемент на макете и сверстаю его на css3, но потом мне напомнят про IE, и я буду ныть, но вяло верстать тоже самое, но другими способами.
Соглашусь с выше сказанным и повторю забудьте:
Так и в этой статье. Я увижу элемент на макете и сверстаю его на css3, но потом мне напомнят про IE, и я буду ныть, но вяло верстать тоже самое, но другими способами.
Соглашусь с выше сказанным и повторю забудьте:
div[class*="embossed"]
0
UFO just landed and posted this here
Видел, конечно же.
Использовать Bootstrap хорошо тогда, когда проект верстается с нуля. А если проект на поддержке или пришел ко мне от другого верстальщика?
Использовать Bootstrap хорошо тогда, когда проект верстается с нуля. А если проект на поддержке или пришел ко мне от другого верстальщика?
-1
UFO just landed and posted this here
Ребята не парятся, но это ребята.
Реалии таковы, что производительность влияет на показатель отказов.
Реалии таковы, что производительность влияет на показатель отказов.
0
Вы можете подтвердить своё высказывание о производительности?
0
Вам выше дали ссылку на Яндекс.
В каком виде вы хотите увидеть результаты?
В каком виде вы хотите увидеть результаты?
-2
Да простенько прям. Две странички. С указанным селектором и по классу. Элементов примерно 5000 — 10 000, что бы хоть какую-то разницу видеть. И время отрисовки страницы.
0
UFO just landed and posted this here
Вы осознаёте что такое 10 000 элементов или хотя бы 5000? Это очень много. На странице обычно используется всего 2 — 3 кнопки. Скажем так, на фоне перегруженности разметки у большинства сайтов, селектор атрибутов — не самое узкое место. Однако этот приём задаёт некий неймспейс, провит которого очевиден и перевешивает все упомянутые ужасы.
+1
Bootstrap — комплексное решение.
0
Ну все. Теперь синий квадрат с текстом — это ссылка в метро стиле.
+19
Хотелось бы увидеть рекомендации на какие нибудь хорошие инструменты для удобной визуальной подготовки таких стилей.
Наверняка есть какие то простые он-лайн инструменты.
А то, когда создаешь подобные CSS-ки вручную, часто забываешь какие-нибудь тонкости, которые потом вылезают боком.
Наверняка есть какие то простые он-лайн инструменты.
А то, когда создаешь подобные CSS-ки вручную, часто забываешь какие-нибудь тонкости, которые потом вылезают боком.
0
Современные тенденции настораживают.
Сверстать блок шириной 50% с закруглёнными углами в 10 пикселей радиусом, белым цветом текста, красным фоном, синей рамкой в 20 пикселей:
Мне одному кажется, что здесь что-то не так? Помню, ещё совсем недавно за такое могли и по морде…
Сверстать блок шириной 50% с закруглёнными углами в 10 пикселей радиусом, белым цветом текста, красным фоном, синей рамкой в 20 пикселей:
<div class="width-50-percent round-corners corners-10 text-color-white background-color-red border-width-20 border-color-special">
Мне одному кажется, что здесь что-то не так? Помню, ещё совсем недавно за такое могли и по морде…
-1
Кнопки классные, остальное — трэш.
-1
Вообще бы, было не плохо создать библиотеку с разбиением на стили (дизайны), чтобы моно было выбрать, например для своего дизайна (сайта) и не заморачиваться. Пришел, выбрал, скопипастил и ушел.
Если такое уже реализованно — сорри.
Если у кого-то возникнут мысли по реализации данного проекта — велком в личку, поддержу.
Если такое уже реализованно — сорри.
Если у кого-то возникнут мысли по реализации данного проекта — велком в личку, поддержу.
+2
Sign up to leave a comment.
Базовые CSS-стили различных элементов