LUC
-
Posts
12 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by LUC
-
-
1 час назад, AlexZaw сказал:
Неужели вам и правда удобнее искать какое-либо правило в длинной строке, если нужно что-то изменить, чем если бы каждое правило было бы на новой строке и видно сразу?
На 24-дюймовом мониторе при разрешении 1080 пикселей по вертикали умещаются 53 строки CSS. То есть, у меня перед глазами всегда большой объем данных и взгляд охватывает одновременно около 500 свойств. Считаю, что это удобно.
Но дело не только в переносе строк. Наличие лишних пробелов мне тоже не понятно. Например, зачем между правилами ставить именно по два пробела? Зачем ставить пробел после двоеточия? Зачем нужна точка с запятой после последнего свойства? Если это улучшает производительность браузера, то имеет смысл взять рекомендации на вооружение. Если же дело только в красоте, то, видимо, вкусы у меня весьма специфичны и я этой "красоты" не понимаю. ?6 минут назад, Alexej сказал:Трудом верится....
Возможно, я задаю глупые вопросы, но моя профессиональная деятельность никогда не была связана с конвейерным производством сайтов. Поэтому даже такие замечательные штуки как препроцессоры css или фрймворки я могу легко игнорировать.
-
Всем привет!
Верстаю сайты более 10 лет. В основном для себя, не для коммерции. Начинал с табличной верстки, потом плавно перешел на блочную. Но никогда не обращал особого внимания на различные правила и рекомендации со стороны опытных верстальщиков. Мой подход к творчеству был предельно прост: если код проходит валидацию - хорошо. Если юзеры не жалуются на поехавшие блоки - ещё лучше! Однако, время и идет и приходится следовать современным тенденциям. После чтения различных материалов, типа "Стиль кода Академии HTML" , возник ряд вопросов, найти ответы на которые не удалось. В частности, касательно рекомендаций, которые даются в руководстве по написанию CSS. Например, следующие:
Цитата1. Для отступов внутри правил используются два пробела.
2. После двоеточия в правилах ставится один пробел (top: 10px;).
3. Каждое объявление в правиле пишется на новой строке.
4. Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки:.selector {
color: #f5f5f5;
}
5. Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.Вопрос такой: для чего нужны все эти рекомендации? Для лучшей читаемости CSS человеком или браузером? Дело в том, что я всю жизнь пишу каждое правило в одну строку. Вот примерно так:
.header {height:500px;font-size:25px}
.header-logo {position:absolute;top:25px;left:30px;z-index:10;width:300px;height:300px}
.content {padding:10px5px;margin:10px 0}
Никаких переносов строк и лишних пробелов. Мне так удобнее читать: слева направо, как книгу. На широкоэкранном мониторе каждое правило умещается на весь экран. Допустим, в CSS прописано 150 правил, в каждом по 10 свойств. Если я каждое свойство перенесу на отдельную строку, CSS растянется на 1500 строк. Кому как, а лично мне читать такой код совершенно неудобно.
Так вот, имеет ли смысл менять свои привычки и переучиваться? Влияют ли все эти дополнительные пробелы и переносы на производительность браузера в лучшую сторону? Или это лишь попытка упростить жизнь верстальщикам-фрилансерам, которым приходится ежедневно вчитываться в чужой код? -
Искал примеры работы с методом .load(), очутился в этой теме. Оказалось, что создал её сам 2 месяца назад))
С предыдущим вопросом разобрался. Теперь ситуация немного другая. Загружаю блок с id="message":
$('#load').load('/ссылка.html #message');
Но вместо селектора нужно подставить переменную. Вот как-то так:
$('#load').load('/ссылка.html blabla');
Подскажите правильный синтаксис.
Пробовал разные варианты:
$('#load').load('/ссылка.html' + blabla);
$('#load').load('/ссылка.html' + ' ' + blabla);
$('#load').load('/ссылка.html' + ' ' + 'blabla');
Ничего не работает.
-
На странице есть блок, с атрибутом data-index, в котором прописан адрес страницы:
<div id="my_id" data-index="/index/877"></div>
Я пытаюсь засунуть содержимое этого атрибута в переменную index и вставить ее в .load(), чтобы подгрузить div-блок с id="message" с той самой страницы:
<script> var index = $('$my_id').attr('data-index'); $('#load').load(index,'#message'); </script>
Однако, get-запрос не проходит из-за того, что к адресу страницы подставляется лишний знак вопроса, вот так: /index/877?
Откуда берётся этот знак вопроса?Кстати, alert(index); выводит корректное значение переменной index.
-
Добрый день. Всегда верстал меню так:
<nav> <a href="#">Пункт меню 1</a> <a href="#">Пункт меню 2</a> <a href="#">Пункт меню 3</a> </nav>
Потом полазил по разным сайтам и заметил, что почти все делают такую структуру:
<nav> <ul> <li><a href="#">Пункт меню 1</a></li> <li><a href="#">Пункт меню 2</a></li> <li><a href="#">Пункт меню 3</a></li> </ul> </nav>
Даже здесь, на вашем форуме, меню оформлено в маркированном списке. Почему? Зачем писать больше лишнего кода? Тег <nav> уже подразумевает, что в нём содержится меню, зачем нужен <ul>? -
Благодарю! То, что нужно.
-
Имеем квадратный (равносторонний) div, внутри него лежит img:
<div><img src="" /></div>
Нужно сделать так, чтобы картинка растягивалась на весь объем дива и не оставалось пустого пространства, вот так:
То есть, если изображение вертикальное, то растягивается по ширине дива, а если горизонтальное - по высоте. При этом края скрываются overflow:hidden. Нужно CSS-решение, без скриптов.
P.S. Это должно работать как background:cover, только применительно к img. -
На странице есть input и select:
<input id="111" type="text" name="blabla" value="02"><select id="222" name="ololo"><option></option><option value="01">Текст 1</option><option value="02">Текст 2</option><option value="03">Текст 3</option></select>
Нужно написать скрипт, который выбирает option со значением value, равным значению value в input'е и подставляет ему атрибут selected.
Или, как вариант, можно присвоить значение value из input'а первому (пустому) option из списка.
То есть, результатом работы скрипта должно быть следующее:
<input id="111" type="text" name="blabla" value="02"><select id="222" name="ololo"><option></option><option value="01">Текст 1</option><option value="02" selected="selected">Текст 2</option><option value="03">Текст 3</option></select>
Или:
<input id="111" type="text" name="blabla" value="02"><select id="222" name="ololo"><option value="02"></option><option value="01">Текст 1</option><option value="02">Текст 2</option><option value="03">Текст 3</option></select>
Подскажите чего-нибудь.
-
Не знаю можно ли выкладывать здесь ссылки, поэтому объясню на словах.
Сайт активно использует border-radius, shadow, transition и прочие эффекты. Страницы с фиксированным фоном (jpg 1920х1080, background-attachment:fixed). Все три колонки имеют полупрозрачный бэкграунд rgba(0,166,156,0.2), некоторые блоки внутри них тоже имеют полупрозрачность background:rgba(0,0,0,0.5). Я заметил, что в базовом Хроме весьма заметно тормозит скроллинг страницы. Другие браузеры на вебките рендерят лучше, но по сравнению с Firefox и Edge все равно не очень хорошо. Я начал с отключения всей анимации и эффектов, радиусов и теней, и в итоге пришел к заключению, что Хром спотыкается о полупрозрачные блоки rgba-фоном, растянутые на всю страницу. После замены rgba на жесткий цвет, лаги практически исчезли. Вопрос: это особенность современного Хрома или проблема в чем-то другом? -
Именно этой статьей я и руководствовался, но в ней ничего не сказано о возможности сделать на одной странице несколько скроллбаров с разными стилем.
-
На странице установлен уникальный стиль полосы прокрутки (средствами ::-webkit-scrollbar). Нужно немного иначе стилизовать отдельный блок на странице. То есть, чтобы полоса прокрутки внутри него была другого цвета и ширины. Как это сделать?
CSS по правилам Академии HTML и прочих гуру-верстальщиков
in HTML Coding
Posted
Спасибо за ответы! Значит буду делать так, как привык)