Comments 54
div[class*="embossed"]Не учите такому никого.
div[class^="embossed"]Потому что важно выделить элементы, у которых им класса начинается с «embossed».
Я прекрасно понимаю что это означает, только вот чем плох вариант всем элементам добавить класс .embossed? Ни дай бог такое кто-то себе скопирует и привыкнет использовать.
UFO just landed and posted this here
Пруфлинк на рефлоуметр в студию.
UFO just landed and posted this here
Я тоже мерил: marow.net/archives/95
В БЭМ кстати нет упоминаний про такую запись селекторов атрибутов!
В БЭМ кстати нет упоминаний про такую запись селекторов атрибутов!
UFO just landed and posted this here
Сомнения — не аргумент.
UFO just landed and posted this here
Аналогично. Прежде утверждений о низкой эффективности селектора подтвердите свои слова ссылкой. В противном случае, нет ни одной причины отказываться от указанного метода.
UFO just landed and posted this here
Какие? Какие аргументы? Ссылка на блог яндекса? Там и упоминаний то нет касательно темы нашего спора.
Для себя я давно решил, что при грамотном использовании ни универсальный селектор, ни селекторы атрибутов не несут никакого вреда. Всё остальное — домыслы и предрассудки.
Для себя я давно решил, что при грамотном использовании ни универсальный селектор, ни селекторы атрибутов не несут никакого вреда. Всё остальное — домыслы и предрассудки.
UFO just landed and posted this here
Экономите время — не пишите комментарии. Тем более, если не разбираетесь в предмете.
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 элементов.
То, что описано по вашей ссылке 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 — приложение использует такие же селекторы — это уже может сказаться.
Вот.
UFO just landed and posted this here
Кратко, ясно, понятно.
Пункт «Красивые кнопочки» с текстом
И стилями
Как-то немного диссонируют, поскольку Embossed это стиль визуализации, а Тени это стиль технической реализации.
И стилями
- CSS с тенями,
- CSS с третьим эффектом
Как-то немного диссонируют, поскольку Embossed это стиль визуализации, а Тени это стиль технической реализации.
UFO just landed and posted this here
Было бы хорошо иметь еще ссылок на подобные кирпичики для проектов.
Only Line Input порадовал — изящно.
codrops, неужели это требует перевода (
Никому не советую так выделять ссылки, только андерлайном. Пунктирной линией лучше обозначать текстовые кнопки, работающие на скриптах и не перекидывающие пользователей на другие страницы.
+, если уж на то пошло, то в CSS3 есть "text-decoration-style". Да и в других примерах код криво написан. К примеру, «Metro Styles». Там при клике (селектор ".metro.three-d:active") свойство «box-shadow» обретает знаечение «none», но при этом остальные свойства анимируются. В итоге получается некрасиво. В html5 приняли "#top" прописывать ссылки тем элементам, что должны вести вверх страницы, в примере же просто "#", да и то, зачем она там? Кликнул и отправился куда-то при том, что просто хотел эффект при клике глянуть… В общем, вроде как и статья начального уровня, так и примеры из той же серии… Чему люди-то после сего научатся?..
Статья хорошая, спасибо, но все-таки выскажусь. Я видел большое количество сайтов с качественными примерами, и все они говорили, что облегчают мой труд как верстальщика, но написать что-то используя css3 я могу и сам, от таких сайтов, обычно, я жду готовый реализаций для браузеров >IE7, так как именно на это я трачу огромное количество своего времени, именно этот код я не хочу писать ручками, а хочу скопировать.
Так и в этой статье. Я увижу элемент на макете и сверстаю его на css3, но потом мне напомнят про IE, и я буду ныть, но вяло верстать тоже самое, но другими способами.
Соглашусь с выше сказанным и повторю забудьте:
Так и в этой статье. Я увижу элемент на макете и сверстаю его на css3, но потом мне напомнят про IE, и я буду ныть, но вяло верстать тоже самое, но другими способами.
Соглашусь с выше сказанным и повторю забудьте:
div[class*="embossed"]UFO just landed and posted this here
Видел, конечно же.
Использовать Bootstrap хорошо тогда, когда проект верстается с нуля. А если проект на поддержке или пришел ко мне от другого верстальщика?
Использовать Bootstrap хорошо тогда, когда проект верстается с нуля. А если проект на поддержке или пришел ко мне от другого верстальщика?
UFO just landed and posted this here
Ребята не парятся, но это ребята.
Реалии таковы, что производительность влияет на показатель отказов.
Реалии таковы, что производительность влияет на показатель отказов.
Вы можете подтвердить своё высказывание о производительности?
Вам выше дали ссылку на Яндекс.
В каком виде вы хотите увидеть результаты?
В каком виде вы хотите увидеть результаты?
Да простенько прям. Две странички. С указанным селектором и по классу. Элементов примерно 5000 — 10 000, что бы хоть какую-то разницу видеть. И время отрисовки страницы.
UFO just landed and posted this here
Вы осознаёте что такое 10 000 элементов или хотя бы 5000? Это очень много. На странице обычно используется всего 2 — 3 кнопки. Скажем так, на фоне перегруженности разметки у большинства сайтов, селектор атрибутов — не самое узкое место. Однако этот приём задаёт некий неймспейс, провит которого очевиден и перевешивает все упомянутые ужасы.
Bootstrap — комплексное решение.
Ну все. Теперь синий квадрат с текстом — это ссылка в метро стиле.
Хотелось бы увидеть рекомендации на какие нибудь хорошие инструменты для удобной визуальной подготовки таких стилей.
Наверняка есть какие то простые он-лайн инструменты.
А то, когда создаешь подобные CSS-ки вручную, часто забываешь какие-нибудь тонкости, которые потом вылезают боком.
Наверняка есть какие то простые он-лайн инструменты.
А то, когда создаешь подобные CSS-ки вручную, часто забываешь какие-нибудь тонкости, которые потом вылезают боком.
Современные тенденции настораживают.
Сверстать блок шириной 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">Мне одному кажется, что здесь что-то не так? Помню, ещё совсем недавно за такое могли и по морде…
Кнопки классные, остальное — трэш.
Вообще бы, было не плохо создать библиотеку с разбиением на стили (дизайны), чтобы моно было выбрать, например для своего дизайна (сайта) и не заморачиваться. Пришел, выбрал, скопипастил и ушел.
Если такое уже реализованно — сорри.
Если у кого-то возникнут мысли по реализации данного проекта — велком в личку, поддержу.
Если такое уже реализованно — сорри.
Если у кого-то возникнут мысли по реализации данного проекта — велком в личку, поддержу.
Sign up to leave a comment.
Базовые CSS-стили различных элементов