-
Posts
125 -
Joined
-
Last visited
-
Days Won
9
Content Type
Profiles
Forums
Calendar
Store
Everything posted by ows.nightwolf
-
Да, соглашусь с Justnewone, судя по резальтатам этого обсуждения можно сделать выводы: 1. Определить какой способ выборки более производителен сложно, т.к. для различных селекторов он отличается, в зависимости от браузера. 2. В пределах одного браузера отличие между скоростями вборки по ID и Class незначительное. 3. Количество операций выборки в секунду и для ID и для class настолько велико, что едвали найдется реальная прикладная задача где будет необходимость задумываться над тем какой способ выборки применить. 4. Как бы то нибыло, следует разделять CSS и JS просто для упрощения внесения изменений в разрабатываемый проект. Если в JS используется выборка по классу, то выбираемым элементам рекомендуется назначать отдельный класс с приставкой "js-" (опять же, для того чтобы отделить классы оформления от классов для скриптов).
-
Мне, для визуального удобства, необходимо сделать margin-right: 25px; для первого h3. Для второго h3 подобное делать необходимо. Выходит, чтобы описать стиль мне необходимо давать первому h3 идентификатор и писать для него стиль, либо же описать style прямо в теге для данного определенного случая. Тоже самое касается и <div style="margin-top: 10px;">. Как поступают в данных ситуациях опытные верстальщики? Нужно идентифицировать и в CSS это описывать? Я не опытный верстальщик Я так понял margin-right задается чтобы input'ы были визуально "в одной колонке"? в таком случае лучше теги <input> в HTML разметке поставьте перед <h3>, а самим инпутам дайте в стилях свойства: float: right;margin-left: ___px; /*(возможно и не понадобится)*/Тогда сколько бы у вас там полей для ввода ни было, они всегда будут по правому краю выровнены, а текст - по левому. И используйте какой ни будь reset.css чтобы сбросить стили браузера по умолчанию (например, normalize). А на счет margin-top - я бы всеравно в css файл выносил. И еще - вместо тега <h3> тут гораздо лучше бы подошел тег <label>
-
Уберите из HTML разметки CSS свойства (в атрибутах style) и перенесите их в css файл т.к. по возможности стоит разделять разметку, стили и скрипты. Применение атрибута style оправдано только для очень спецефического/непостоянного контента (например какая ни будь картинка в статье) из соображений что если вам понадобиться ее удалить, то вы просто удалите HTML код относящийся к ней и этого будет достаточно, не нужно будет лезть в css файл и там удалять свойства этой картинки. У вас же стили задаются основным блокам страницы, которые универсальны (показываются на всех страницах) и неизменчивы (маловероятно что вы будете их в будущем удалять), т.е. рекомендуется все свойства относящиеся к ним держать в css файле.
-
Теоретически должно зависеть от браузера, у firefox и webkit-based браузеров разные способы кеширования результатов поиска.
-
Фоновое изображение с элементами управления на весь экран
ows.nightwolf replied to Akkord87's question in HTML Coding
Если есть возможность можете сделать картинку в формате svg и назначить на элементы самой картинки ссылки. Примитивный пример работы с ссылками в svg тут. Это жестко привяжет ссылки к картинке как бы вы ее там не деформировали. Но решение нестандартное, я так делать никогда не пробовал, по этому о побочных эффектах тоже ничего сказать не могу. -
Заключите тело каждой из функций в фигурные скобки. Согласно действующему стандарту тело функции всегда должно заключаться в скобки, даже если оно состоит всего из одного выражения. То что написано у вас работает только в FF т.к. данный синтаксис объявления функции является частью предложенного мозилой расширения к языку (подробнее тут).
-
Можете попробовать плюс сделать псевдоэлементом не у span'а, а у самого li, тогда разметка останется такой какая есть сейчас, и не будет излишних тегов-оберток.
-
Вариант от npofopr в IE 11 работает, попробуйте очистить кеш у IE, у меня такое пару раз было - изменения в файл внес, а IE его не обновлял.
-
Не могу так с ходу придумать как по русски правльно обозвать этот процесс, но в общем в скорости нахождения этого элемента. Ну например если сравнить селектор с большой вложенностью и единичный селектор, то единичный будет обрабатываться быстрее. ( .class быстрее чем div.class > child ). Аналогично id обрабатывается быстрее чем class (источник - в спойлере). Если мне не изменяет память я когда-то где-то читал что создавая элементы с id браузер каким-то образом у себя их отмечает, что позволяет ему найти нужный элемент без необходимости перебора всего дерева объектов, за счет этого и достигается большая производительность, но эта информация непроверенная.
-
Использование идентификаторов в качестве селекторов нежелательно, т.к. это исключает возможность повторного применения этих стилей к другому элементу. Кроме того, идентификаторы часто находятся в распоряжении JS скрипта, и если в будущем программисту вдруг вздумается поменять идентификатор элемента на другой, то верстка повалится, надо будет лезть еще и в CSS подправлять, что не есть настоящий дзен. Единственным объективным преимуществом id перед классом является бóльшая производительность, но это экономия на спичках.
-
Вау! спасибо, parfait очень удобная вещь на первый взгляд. очень удобно образмеривать все.
-
На сколько я понял, вам нужно быстро получить значения top / left и width / height этих элементов чтобы вручную их самому не считать. Могу предложить такой вариант: сгруппируйте в фотошопе слои с маркерами, потом кликните правой кнопкой мыши на группе и выберите Copy CSS (не знаю как на русский перевели, видимо "копировать CSS", ваш кэп ). Я думаю что делать дальше вы разберетесь, но на случай если кто ни будь из новичков наткнется на этот пост под спойлером описан порядок дальнейших действий.
-
<del> или text-decoration:line-through;
ows.nightwolf replied to Светлана Г.'s question in HTML Coding
Так что же они всетаки ответили?) -
Используйте одинарные кавычки: title="{short-story limit='200'} А вот <hr> в атрибут вставить не получится, этот тег будет написан обычным текстом
-
Div по центру c position:absolute;
ows.nightwolf replied to BeetleJuice541's question in HTML Coding
либо вариант без обертывания в дополнительный div, но работает в IE9+: left: 50%;transform: translateX(-50%); -
Я не уверен, но помоему тот скрипт что вам дали как раз делает то что вам нужно. На странице вым дается форма, в которой вы указываете путь к своей картинке, потом в этой форме вы жмете кнопку "отправить", картинка посылается на сервер. На сервере PHP скрипт ее принимает, сохраняет, а вам в браузер отправляет текст HTML кода для этой картинки - а именно: <a href=http://домен/имя картинки'><img src='http://домен/имя картинки'></a>. Если вам не нужно HTML представление кода картинки, а только ее адрес на сервере, то в команде echo вместо html кода вставите чтоб сервер отдавал только адрес этой картинки. Единственное что в этом скрипте не генерируется рандомное название для вашей картинки для сохранения, если я не ошибаюсь.
-
Иными словами создаем <div>, задаем ему нужную ширину и высоту, вставляем иконку в фон и этот блок превращаем в ссылку. Так я понял? Да, кроме того что создавать надо не тег <div> а тег <a> (обычная ссылка). http://jsbin.com/zadoyiti/1/edit
-
В дополнение к Sergik+: и тогда для такой ссылки надо задать свойства display: inline-block, width и height. Ваш кэп
-
А разве есть такая команда - border-image: linear-gradient(to bottom, #6ca8c1, #7cc1d9, rgba(0, 0, 0, 0)) 1 100%;?Синтаксис же вроде : border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2} Согласно спецификации свойство border-image (п. 6.7) в одном из своих параметров устанавливает свойство border-image-source, которое в свою очередь может принимать своими значениями типы none и <image> (п. 6.1). В свою очередь тип <image> (п. 3) может принимать значения таких типов как: <url> | <image-list> | <element-reference> | <gradient> т.е. градиент можно применять во всех свойствах, которые ожидают в качетсве своего значения тип данных <image>. В дополнение отрывок из того же пункта спецификации: Переводится примерно как: Тип <image> может быть использован в множестве CSS свойств, включая свойства ‘background-image’, ‘list-style-image’, ‘cursor’ (где он замещает <url> компонент в значении свойства). По поводу вашей задачи - вот так вот вроде бы должно работать в современных браузерах, но проверить у меня пока возможности нету (система только что установлена). У меня FF nightly - все отображается корректно. http://jsbin.com/rusicoze/1/
-
<del> или text-decoration:line-through;
ows.nightwolf replied to Светлана Г.'s question in HTML Coding
По теме (просто мое мнение): в данном случае из спецификации похоже ничего не выудишь. Если руководствоваться логикой, то тоже двоякое решение: с одной стороны перечеркивание старой цены используется как маркетинговый ход для визаульного воздействия на покупателя (как минимум чтоб он увидел выгодную разницу между старой ценой и новой), т.е. относится к визуальному оформлению, т.е. должны использоваться стили CSS; с другой стороны имеет место быть семантическая разметка, когда старая цена была исправлена (<del>) на новую (<ins>). Но тем не менее мне больше симпатизирует CSS стиль т.к. в моем понимании тег <del> используется именно для постоянных исправлений (измененные пункты контракта, списков и т.д.), а цена по истечении срока акции вернется к своему первоначальному значению. Не по теме: продолжая мысль Great Rash можете еще псевдоэлементы добавить чтоб уж наверняка все перечеркнуть -
Как вариант вместо <br> задать в CSS для картинки свойство display: block
-
"Новый сервер". Город Минск.
-
Прямоугольник+треугольник через псевдоэлемент и градиент
ows.nightwolf replied to Vitalya T's question in HTML Coding
CSS'ом вроде не сделать, т.к. треугольник делается с помощью свойства border, а при назначении этому border'у градиента (через свойство border-image: linear-gradient(...) ) назначенный градиент будет иметь приоритет перед цветом transparent у border'ов справа и слева и "эффект треугольника" пропадет.