SelenIT
-
Posts
4,327 -
Joined
-
Last visited
-
Days Won
140
Content Type
Profiles
Forums
Calendar
Store
Everything posted by SelenIT
-
Прикрепить второе фоновое изображение к низу страницы
SelenIT replied to Lang's question in HTML Coding
В каком браузере? Только что проверил в Fx62, Chr69. Edge17 — везде фон желтый, высота body без контента нулевая. Если фон body, при отсутствии явного фона для html, применяется ко всему окну — это другая особенность (см. 4-й абзац спеки). Это не значит, что сам body растянулся. -
Прикрепить второе фоновое изображение к низу страницы
SelenIT replied to Lang's question in HTML Coding
Не нужно. Без этого body не поймет, от чего отсчитывать свои 100%, и футер не прижмется. Можно, конечно, вместо этого задать body height: 100vh вместо 100%, тогда стили html влиять не будут. Только в очень-очень старых браузрах футер не прижмется — но так тем браузерам и надо:) -
И запомнить, что слеш перед ">" — НЕ закрытие тега (если это не SVG- или MathML-тег). HTML — это не XML, и в общем случае с ним несовместим.
-
appendChild, конечно же, добавляет в конец предка (по смыслу слова append). Чтобы вставить перед определенным элементом, нужно использовать insertBefore. Где стоял тег <link>, обоим этим методам неважно. Кстати, HTML-импорты по факту поддерживаются только в Хроме, но и оттуда их собираются выпилить. Не прижились ?
-
Рискованный совет для 2018 года. Я бы сказал, что если блоки должны стоять в строчку, пора уже смело ставить display:flex родителю и не беспокоиться ни о пробелах между тегами, ни о размерах (в главном), ни о выравнивании высоты и по высоте. А в тех 3% ископаемых браузеров, которые этого не понимают, всё равно красиво не будет, как ни старайся (не одно так другое вылезет). Да и не стоят они того, в них главное чтобы текст читался.
-
При нехватке элементов закругления уголков можно в некоторой степени сделать теми же градиентами, а-ля http://jsfiddle.net/qs2hpr5j/1/. Но может понадобиться долго подгонять стыки...
-
Я бы сделал примерно так: <table class="mytable"> <tbody> <tr class="mystolb" onclick="this.getElementsByClassName('js-action-link')[0].click()"> <td><img src="http://knigobiz.ru/wp-content/uploads/2018/05/LitRes.png" class="laravel-icon">ЛитРес</td> <td>Аудиокнига <a class="js-action-link visually-hidden" href="%%LitUrlAudio%%" target="_blank">(слушать)</a></td> <td>₽%%LitAudioPrice%%</td> <td><i class="fas fa-shopping-cart"></i></td> </tr> </tbody> </table> Для класса visually-hidden задать стили, делающие ссылку невидимой (лучше всего делать это скриптом же, по событию DOMContentLoaded или просто в конце <body>). Так даже юзеры с выключенным JS смогут открыть аудиокнигу в новом окне. А при включенном JS ссылка будет невидимой, но по клику на строку таблицы она сработает.
-
Тут проблема в том, что собирается HTML-строка, а в HTML нет экранирования спецсимволов слешем. Для HTML кавычки надо экранировать как ", т.е. str = "Описание: "машина""; // строка для дальнейшего вывода в HTML А еще лучше в выводе использовать типографские кавычки («ёлочки» или “лапки”), которые и выглядят приятнее, и со спецсимволами ни в одном известном мне компьютерном языке не конфликтуют ?
-
Строго говоря, не совсем. Грубо упрощая, у строчного элемента есть две высоты: та, которая заливается фоном, реагирует на :hover и т.п., и та, которая влияет на высоту строки, в которой элемент находится. Изначально обе высоты определяются исключительно метриками шрифта (что-то-Ascent — «надводная» часть символа над базовой линией, что-то-Descent — «подводная» часть, и, опционально, что-то-Leading — дефолтный зазор между символами соседних строк, причем разные ОС используют разные метрики). Браузерный отладчик, скорее всего, показывает для него первую высоту. Высоту заливки фона уменьшить нельзя, но можно увеличить верхним и нижним padding-ами. Высоту, на которую элемент «распирает» свою строку, можно и увеличить, и уменьшить — задав line-height. Разница между заданной line-height и дефолтной высотой (той, что по метрикам) делится пополам и по половине прибавляется сверху и снизу (так что элемент всегда центрируется в строке). Если line-height меньше, чем дефолтная высота, то фон элемента будет выступать вверх и вниз за границы строки, а буквы соседних строк будут частично перекрываться. Инлайн-блок же внутри устроен именно как блок, со своим собственным контейнером строки. И его высота определяется высотой этой строки (тем, насколько его текст ее «распирает»), т.е. конкретным значением line-height. А снаружи этот блок вписан в строку (как картинка) и влияет на высоту этой строки своими внешними габаритами (включая padding/border/margin).
-
Префиксы с полифилами в общем случае никак не связаны. Основная идея полифилов — реализовать что-то, чего браузер еще нативно не умеет (напр. fetch), через то, что он уже умеет (напр. XMLHttpRequest), пусть даже ценой добавочного, менее красивого и более медленного кода. Чтобы потом можно было остальной код писать стильно-модно-молодежно и он хоть как-то отработал даже в старье, и не надо было писать для старья отдельную ветку. Полифилить CSS труднее, чем JS, потому что костыли поневоле получаются заметнее (напр. чтобы заполифилить CSS Shapes, приходится напихивать в DOM добавочные элементы с обтеканием — по-другому, если в браузере нет нативных средств, обтекание по сложному контуру не сделать). Поэтому возможности у CSS-полифилов обычно ограничены и применяются они намного реже. Чтобы преодолеть эти ограничения, придумали проект CSS Houdini (набор JS API для низкоуровневых функций браузера, которыми обычно управляет CSS — парсинг стилей, расчет размеров и положения элементов, сама отрисовка и т.д.), который должен это облегчить, но эти API сами пока мало где поддерживаются...
-
3. Используйте display:flex для контейнера и забудьте извращения с убиранием пробелов и «клирфиксингом» флоатов как страшный сон* * ну ладно, совсем не забывайте, оставьте как фолбэк для 2% совсем ископаемых IE:)
-
Есть подозрение, что это «ложный жирный». Попробуйте подключить жирный вариант этого шрифта отдельно, чтобы браузеру не приходилось «синтезировать» его из обычного.
-
Верно ли я понимаю, что всё, кроме кнопки «Add to cart», ведет на отдельную страницу товара, и только кнопка выполняет специальное действие?
-
Интерактивные элементы (в том числе другие ссылки) нельзя в ссылку вкладывать. Кроме этого в ссылку можно вкладывать всё, что можно вкладывать в ее родителя. «Блочностью и строчностью» в современном HTML лучше вообще не заморачиваться, не всё сводится к этому делению, и от него больше путаницы, чем пользы. А что в карточке товара — другие ссылки?
-
Мир несовершенен:(. Но, справедливости ради, чем дальше, тем таких несуразных ограничений меньше.
-
button — некая «вещь в себе», которая заключена в «волшебный» контейнер с display:inline-block, и плювать хотела на явно заданные стили, к сожалению:(. Очень многих лет уговоров стоило убедить разрабов браузеров (прежде всего Мозиллы), что такое поведение — не фича, а вообще-то баг, и что display кнопки должен слушаться заданных стилей (в частности, кнопка должна уметь становиться флекс- и грид-контейнером), но display:inline для кнопки — последний рубеж, который пока никак не поддается. Единственный известный мне обходной путь — задать кнопке display:contents и работать со вложенным в нее span-ом — работает пока только в Хроме с включенным экспериментальным флагом (возможно, в Сафари ТП теперь тоже). В качестве обходного варианта можно задать для кнопки <label>, а саму кнопку скрыть (как при кастомизации чекбоксов/радио).
-
Приоритет селектора класса над селекторами типа
SelenIT replied to Odinokiy_volk's question in HTML Coding
Приоритеты по специфичности относятся к разным селекторам, применяющимся к одному и тому же элементу. Но любой селектор, применяющийся к самому элементу, всегда приоритетнее стилей, доставшихся этому элементу по наследству (неважно от кого). Поэтому для ссылки приоритетнее стиль, заданный конкретно для ссылок, чем стиль, доставшийся ей по наследству от body или элемента с классом. И т.д. -
У вас в атрибуте style стоит сокращенное свойство background, которое включает в себя background-size и, соответственно, перебивает его (на дефолтное значение auto в данном случае, т.к. не указано иное). Указывайте там только background-image, а всё остальное (включая background-size) перенесите в стили, и всё будет ОК.
-
Если в самом конце, эффект тоже может быть не заметен (конец страницы нельзя поднять к верхней части окна). Эффект заметен, если страница длинная, и между якорем и ссылкой на него приличное расстояние (порядка высоты экрана и больше).
-
Почему это внутри цикла? Вот кнопки, кроме первых трех, и оказываются вне формы... Вообще возьмите за правило — отлаживайте ту часть системы, в которой проблемы, а не всю систему как «черный ящик». Если проблема в работе HTML — смотрите сгенеренный HTML, а не PHP-исходник. Так будет намного нагляднее и быстрее...
-
Да, можно. Всё так и есть. Вся путаница из-за многозначности слова «блок». В HTML «блок» — это логический, структурный элемент страницы: абзац, заголовок, список, раздел документа, форма и т.п., из которых, как из кубиков, выстраивается логическая структура страницы. В HTML4 таких элементов было мало, поэтому для любых мало-мальски нестандартных группировок (напр. объединить заголовок, вводный абзац текста, абзац с датой и автором и картинку в более крупный блок «анонс новости», чтобы потом из таких блоков построить еще более крупный блок «лента новостей») приходилось использовать элемент <div> — поэтому он и считался «основным строительным блоком» (опять «блок!») страницы. Сейчас есть много более специализированных логических контейнеров — <nav> для навигационных меню, <header> для вводной информации и <footer> для вспомогательной, <main> для основного контента и <aside> для связанного лишь косвенно, <article> для самодостаточных сущностей и <section> для отдельных смысловых частей чего-то более крупного, <figure> для иллюстраций и примеров, <summary> для раскрывающихся подробностей и т.д., и лучше по возможности пользоваться ими по назначению. А в CSS "block" — один из типов отображения (элемент по умолчанию начинается с новой строки и заполняет прямоугольник, вписанный своими margin-ами в доступную ширину контейнера, а уже внутри этого прямоугольника могут быть либо другие блоки, либо строки с текстом и строчными элементами). Вообще вся визуальная структура страницы состоит из вложенных друг в друга прямоугольников разного типа, которые по английски называются «box» (букв. «коробка»), отсюда «box model» (все эти margin/border/padding/width/height), которую по-русски традиционно почему-то стали называть «блочной моделью» — вот еще одна причина путаницы. Есть и другие типы отображения (и, соответственно, «box»-ов) — "inline" (строчный, элемент вписывается в строку текста, при необходимости разрываясь на несколько строк), "inline-block" (строчно-блочный, элемент образует монолитный прямоугольник, и этот прямоугольник целиком встраивается в строку текста, словно картинка или одна большая буква), "flex" (флекс-контейнер, см. флексбоксы), "grid" (грид-контейнер, см. CSS-гриды), "table" (табличный) и т.д.. Все они различаются нюансами своей «box model» и правилами взаимодействия с содержимым и с соседями. Любому элементу можно стилями задать любой тип отображения (за редкими исключениями — есть нюансы с элементами форм и т.п.). Но логическая, структурная роль элемента от этого не изменится (и то, что в этот элемент можно вкладывать — тоже). Поэтому в современном HTML элементы делят не на «строчные и блочные», как в HTML4, а именно по логической роли — на структурные, текстовые, интерактивные и т.д. (причем многие элементы входят в несколько категорий сразу). В начале-середине 2000-х было модно говорить о «блочной верстке» в противовес табличной (раньше, в 90-х, страницы верстали, «нарезая» всю страницу на ячейки одной таблицы, частично объединенные через rowspan/colspan, и распихивая контент по этим ячейкам, другого тогдашние браузеры не понимали). Имелось в виду именно логическое структурирование HTML на логические же блоки, с последующим оформлением этих блоков через CSS (в принципе как угодно, хоть через тот же display:table, но чаще всего в дело шли float и clear). Сейчас чаще говорят о семантической верстке — использовать HTML-элементы по их назначению, как подходит по смыслу, а оформлять их как нужно по дизайну, используя все возможности современного CSS. Элемент div по-прежнему важен, когда нужно соорудить «что-то этакое», для чего нет стандартного элемента, или нужна добавочная обертка, чтобы подстраховать старые браузеры — но в целом сейчас его роль скорее вспомогательная.
-
Схлопнуть padding и убрать border-radius у подряд идущих inline
SelenIT replied to 7ion's question in HTML Coding
Боюсь, что нет:(. Родительского селектора пока ни один браузер ни в каком виде не реализовал... -
Схлопнуть padding и убрать border-radius у подряд идущих inline
SelenIT replied to 7ion's question in HTML Coding
Вот это, к сожалению, CSS-ом сейчас никак не описать. Ни плюсик, ни тильда не умеют проверять наличие/отсутствия текстовых нод. Умеет только :empty, но он, очевидно, тут не подходит. Так что добавлять padding инлайновым элементам, над которыми нет полного контроля — изначально была не лучшая идея. Теперь, если юзер сделал бяку, придется терпеть :(. Можно разве что немного смягчить последствия бяки отрицательными margin-ами, прозрачностью у фона и разрядкой букв, чтобы стыки padding-ов внутри были не так заметны, типа такого... -
Способы-то есть всегда — можно без псевдоэлементов через множественные фоны, можно вообще через border-image. Надо смотреть по конкретной задаче — что за блок, как он растягивается и вообще ведет себя при разных размерах окна и контента, есть ли другие элементы, которые не должны с ним перекрываться...
-
Дизайнеры не виноваты. Но да, на флексах придется именно извращаться, и результат получится очень негибким. О такой адаптивности «из коробки», как в примере mrnobody выше, придется забыть:( Как вариант, можно попробовать скриптом проверить, применилось ли к контейнеру какое-либо из гридовых свойств (через window.getComputedStyle), и если да, то ничего не делать (всё сделают гридовые стили), а если нет — динамически добавить на страницу скрипт Masonry...
