SelenIT
Эксперт-
Публикации
4 246 -
Зарегистрирован
-
Посещение
-
Дней в лидерах
127
Тип публикации
Профили
Форум
Календарь
Блоги
Магазин
Карта разработчиков
Все публикации пользователя SelenIT
-
Если известны минимальная ширина блока и разумные границы диапазона ширины контейнера, можно воспользоваться таким подходом. Но вариантов кода придется написать немало.
-
Border-image по умолчанию заполняет толщину обычного border-а, а она по умолчанию нулевая. Плюс Хром и ему подобные требуют, чтобы border-style тоже был не none. Подробнее здесь: http://css-live.ru/articles-css/understanding-border-image.html. Но на мой взгляд, border-image для этой задачи — из пушки по воробьям. А проще всего сделать эту палочку неповторяющимся одноцветным градиентом, ограничив ему background-size, типа такого: background: #4ccfc1 linear-gradient(#fff,#fff) left center no-repeat; background-size: 1px 0.8em; А по :hover менять только background-color.
-
(с) — не пруф. Есть скрин реальной статистики сайта с >2% ископаемых IE?
-
Нет больше таких браузеров, не выдумывайте Хотя иногда и в сторону таблиц (CSSных, разумеется) посмотреть имеет смысл. В общем, действуйте гибко, без предрассудков!
-
Вот по этому и не прячется. relative + z-index = новый контекст наложения. У фона и бордеров элемента, создающего контекст наложения, z-index по факту минус бесконечность. А z-index самого контекста влияет только на перекрытие его другими контекстами (не из числа его потомков), внутри контекста оно никакой роли не играет.
-
Уточните, про какие именно правила речь. CSS-свойства бывают наследуемые и ненаследуемые, первые (font-size, color и т.п.) распространяются на потомков по умолчанию, вторые (display, padding и т.п.) — нет, их надо указывать явно. Подозреваю, что дело в этом. В примере на jsfiddle я стилей для .menu почему-то не наблюдаю. Возможно, они в файле style.css (который не загружается, т.к. указан относительный путь, а на сервере jsfiddle.com такого файла нет)? Лучше скопировать содержимое этого файла (как минимум, то, что относится к .menu) прямо в панель CSS в самом примере.
-
Во-первых, НЕ ПАНИКОВАТЬ! Это не заказчик ругается, не босс отчитывает, не жена скандалит, не «братва наехала», и т.п.. Это просто глупая программа, которая к тому же изо всех программных сил хочет помочь (но тут вышло у нее очень неуклюже). Есть хорошее интервью с разработчиком этой программы, где он доступно поясняет, в чем ее смысл. Во вторых, это не ошибка (Error), а всего лишь предупреждение (Warning). Т.е. формальные правила HTML не нарушены, фактически документ валиден. Но глупой программе показалось, что что-то в документе нелогично. Возможно, совершенно напрасно. В конце концов, кто может знать логику документа лучше, чем его автор? Так что не надо кидаться сходу что-то исправлять только из-за того, что программе что-то показалось — в конце концов, у всех программ бывают просто глюки. Но лучше всё-таки перестраховаться и перепроверить, что там ему померещилось и почему. Мало ли. Вдруг действительно что-то можно улучшить:). В третьих, это не экзамен, где отвечают только «верно/неверно» и при ошибке заставляют перепроходить тест заново. Программа сама, английским по белому, объясняет, что ей тут... даже не то чтобы не понравилось, а показалось подозрительным — достаточно спокойно прочитать, что она вам пишет (можно через гугл-переводчика, если с английским проблемы). А пишет она вам буквально следующее: В общем, текст у вас помечен как английский, но на английский не похож. Да и вообще на осмысленный (но, повторюсь: это лишь частное мнение глупой программы!). Вообще-то это может быть проблемой: лучше всегда тестировать верстку на текстах, «максимально приближенных к боевым» — разной длины, с очень короткими и очень длинными словами (желательно из предметной области сайта). Заодно так ловятся проблемы верстки, если какое-нибудь длинное слово что-нибудь разопрет, сломает красивое обтекание, не впишется в рамку и наедет на соседа и т.п. Так что если вы проверяете голый каркас верстки, без наполнения — лучше потратьте пару минут и проверьте с наполнением тоже. Скопируйте пару текстов с другого сайта похожей тематики, например. А если проверяете с текстом — проверьте этот текст на орфографические ошибки, может быть, их там так много, что язык исказился буквально до неузнаваемости. Если же текста на странице вообще не должно быть или он и не должен быть осмысленным (мало ли!) — попробуйте действительно сделать то, что предлагает программа и справка по ее ссылке : поставьте lang="zxx". Заодно всякие читалки для слепых не будут ломать свои синтезаторы, пытаясь озвучить это как осмысленные слова — всем пользователям будет легче разобраться. Или, если пока неизвестно, на каком языке будет страница, оставьте атрибут пустым (lang=""). Но вполне может быть, что это действительно просто глюк. Тогда... тем более см. п. 1
- 2 ответа
-
- 2
-
Не работает position:relative на tbody, tr, td
SelenIT ответил в вопрос пользователя Daniil Khanin в Проблемы верстки
Три года как пофиксили тот фоксовый баг. Да и второй с ним за компашку. Три года, Карл! Сколько можно жить прошлым и возводить напраслину на мой любимый браузер? Проверить же можно за полминуты... -
Как спрятать текст под текстом в хтмл
SelenIT ответил в тему пользователя nicepracc в Сделайте мне бесплатно
Поддерживаю предыдущих ораторов, поисковики считают это нарушением и наказывают за подобное. Впрочем, скриншоты наводят на мысль о рекламе какого-то лохотрона, а для таких вещей это в самый раз, ибо нечего подобному хламу всплывать в поиске. А если горе-лохотронщик еще и заплатит за такой сайт — вообще отлично:) -
Из метрик шрифта.
-
Иконка на одинаковом расстоянии от текста
SelenIT ответил в вопрос пользователя SnowSilver в Проблемы верстки
Придумался только вариант с фоновой картинкой. И то только для новых браузеров. -
Зачем??? В преддверии 2017-го года-то?.. И вопрос вроде был про радиальный градиент, а не про линейный.
-
Вот такие музейные экспонаты любят заводиться только в IE, причем только в режиме обратной совместимости.
-
Зависание псевдокласса :active в IE7
SelenIT ответил в вопрос пользователя rolex12 в Проблемы верстки
Припоминаю, был у вымерших IE такой баг, что :active фактически работал как :focus (a :focus, ЕМНИП, вообще толком не работал). Как быстрый костыль, могу предложить любое-ненужное-свойство: expression(this.onFocus=this.blur()); (источник). Нормальные браузеры проигнорят, а этот zombie сможет наконец у(с)покоиться... -
Возможно, у вас не «фон не срабатывает», а сама высота не учитывает содержимое элемента. Так бывает, например, если это содержимое — float-ы, а блоку не задан ни .clearfix, ни какое-либо из свойств, создающих отдельный блочный контекст форматирования (display: inline-block/table/table-cell, overflow:hidden/auto, само float).
-
<div class="left"> <p style="padding-bottom:110px;">Телефон:</p> <p>E-mail:</p> </div> <div class="right"> <p>095 432 02 95</p> <p>063 296 89 61</p> <p>067 910 58 62</p> <p class="mail"><a href="viber://chats">viber://tel: +380632968961</a></p> <p class="mail"><a href="mailto:[email protected]">[email protected]</a></p> </div> Не надо так. Как бедный поисковик или читалка с экрана голосом поймет, что первые четыре абзаца справа — телефоны? Подписи и то, что они обозначают, должны быть сгруппированы вместе и идти последовательно.
-
Для электрика в селе вставить одну обычную button в отдельную последнюю ячейку tr-ки, как деды еще делали. А для столичных хипстеров кнопку спрятать и навесить на всю tr обработчик клика с тем же действием, и все будут довольны. Прогрессивное улучшение называется! А «в лоб» задать кнопке табличное или еще какое-то хитрое отображение, увы, вряд ли выйдет, тем более кроссбраузерно. По-моему, без скрипта тут никак особо не выкрутиться.
-
Синхронизация высоты тегов <p> в двух <div>
SelenIT ответил в вопрос пользователя Svoi в Проблемы верстки
Может, если важно именно построчное совпадение, есть смысл делать банально таблицей — строчка оригинала, строчка перевода? -
Не работает display:inline-block
SelenIT ответил в вопрос пользователя Владимир Горинов в Проблемы верстки
На самом деле зависит от свойства. Бывают наследуемые свойства и ненаследуемые. Display — ненаследуемое. При display:flex и будущем (как минимум в Firefox 52+ и Chrome 57+) display:grid к непосредственным потомкам такого контейнера применяются особые правила, это да. Но само свойство не наследуется, так что если надо разместить флекс-контейнер во флекс-контейнере, внутреннему блоку всё равно тоже надо будет явно указать display:flex. -
Точнее, :not как раз не игнорируется, просто селектор становится бессмысленным и ничего не выбирает (хотя формально валиден). Такие заведомо ничего не затрагивающие, но формально валидные фиктивные селекторы могут быть полезны в хаках для конкретных браузеров, типа #hack:not(#hack):-moz-any-link, .my-selector { /* стили применятся только в браузерах, понимающих :-moz-any-link, т.е. в Мозилле */ }
-
Много псевдоэлементов в одном селекторе
SelenIT ответил в вопрос пользователя aqua.77 в Проблемы верстки
Не обязательно, :not(.что-то) без указания тега равнозначно *:not(.что-то), соответствует любому тегу, не имеющему класса .что-то. По сути да. Между .q1 и целевым li, кроме ul.q77, есть еще один ul — .q2. Поэтому формально условие селектора «внутри какого-нибудь ul без класса .q77, находящегося внутри .q1» выполняется. -
Возможно, испорченный телефон донес обрывок разговора, касающегося экстремальной оптимизации анимаций и прочего, типа такого. А вообще для новых проектов рекомендуют флексбокс, в том числе по соображениям скорости (к сожалению, русская версия документа по ссылке сильно отдает «надмозгом», по возможности лучше читать оригинал). Ближайшей весной в большинстве браузеров станет доступна грид-раскладка, так что есть смысл уже сейчас ее осваивать. А насчет адаптивного и отзывчивого неплохо разъясняется в этой статье. Но на практике, по-моему, этими тонкостями сейчас меньше заморачиваются. Главное, чтобы для как можно большего количества пользователей информация оставалась доступной, а интерфейс юзабельным, а уж какими средствами это достигается — вопрос второстепенный. Кстати, доступность (ARIA-атрибуты и т.п.) — тоже довольно актуальный тренд.
-
Много псевдоэлементов в одном селекторе
SelenIT ответил в вопрос пользователя aqua.77 в Проблемы верстки
Другими словами, псевдоклассы — это как бы классы (но не классы) для существующих элементов. А псевдоэлементы — это как бы элементы (но не элементы) помимо существующих элементов. В будущем стандарте будет чуть сложнее, но общий принцип тот же:) -
Много псевдоэлементов в одном селекторе
SelenIT ответил в вопрос пользователя aqua.77 в Проблемы верстки
Во-первых, это не псевдоэлементы, а псевдоклассы. Их может быть много, но любой псевдокласс применяется к тому элементу, для которого написан. Во-вторых, :not() в CSS Selectors 3 и большинстве браузеров принимает только простой селектор (т.е. либо один тег, либо один класс, либо один псевдокласс, либо один id). Сложные селекторы в :not() появились только в CSS Selectors 4 и работают пока только в Safari 9+. Смысл записи .q1 li:first-child .q2 li:hover:not(.q77 li) я понимаю как "элемент li под курсором, находящийся где угодно внутри элемента с классом q2, находящегося где угодно внутри первого элемента li где угодно внутри элемента с классом q1, и при этом не имеющего предка с классом q77". Для частного случая в примере, когда .q77 появляется внутри .q2 (т.е. стиль должен применяться к любым li внутри .q2, кроме ), можно сделать что-то типа такого: .q1 li:first-child .q2 > li:hover, .q1 li:first-child .q2 :not(.q77) li:hover { /* стили для li непосредственно в .q2 или через любые прослойки, кроме .q77 */ Если же обертка с классом .q77 может быть где угодно на любом уровне, то всё сложно. Нужно или явно перечислить все возможные варианты вложенности с ее участием, или вообще сделать иначе. Например, искусственно поднять специфичность подобным хаком: .q77 li:not(#non-existent-ID) { /* хак для поднятия специфичности выше любой комбинации классов, но ниже !important */ /* переопределяем обратно на обычные стили для li */ } Но еще лучше по возможности не привязываться ко вложенности тегов вообще. Тем более тут всё равно ведь для каждого уровня меню задействован свой класс.- 21 ответ
-
- 1
-
Да, является.