DjTarik

April 4, 2013

Всем известно, что текст в теге <button> при клике на нём смещается вправо и вниз.

Этот "эффект" присутствует в браузерах IE и Opera:


<button type="button" name="" value="" title="">Текст</button>

http://jsfiddle.net/DjTarik/hGgSE/

Сразу говорю - интересует именно вариант с кнопокй (тегом <button>). Просьба не советовать "переверстать на ссылках", "использовать input" и т.д.

Собственно вопрос: придумали 100% решение, как это этого избавиться? Или с давних времен ничего не изменилось?

Тут больше спортивный интерес.

Одно решение я нашел (с оберткой текста), но оно тоже не идеально.

P.S. Предыдущие темы по данному вопросу видел, они старые. Надеюсь, что что-то изменилось с тех пор =)

Спасибо.

January 2, 2013

Похоже, здравый смысл восторжествовал: из спеки WHATWG этот злополучный <command> дропнули, добавили <menuitem> (как в Fx-овой реализации), а внешний вид меню-тулбаров переложили сугубо на CSS. Ай да Хикси, ай да ! Правда, с атрибутом command неразбериха осталась, но поживем-увидим...
В W3C-шной спеке и <command>, и <menu> помечены как "под риском удаления".

Спасибо за инфу! Будем сделить дальше)

P.S. Кстати, Илья - не хочешь вести колонку по спецификациям, изменениям, текущем состоянии дел и т.д. на русском? Успех гарантирован)

October 31, 2012

DjTarik,
http://raphaeljs.com/polar-clock.html
Это рафаель

Круто... Спасибо за наводку)

У меня тупейшим алгоритмом (как в далеком детстве на бейсике) получилось так. Вот так, наверное, чуть умнее и продвинутее.

Да ты ваще маньяк) На всё у тебя найдется решение. Спасибо!

А я что-то про канвас в последнюю очередь подумал)

October 31, 2012

gif
или svg
либо canvas
это типа прогрессбар будет?

Да, это фигня показывает время, через которое переключиться слайдер.

Гиф не подойдет, т.к. время клиент может сам настраивать. С SVG пока не знаком - остаются скрипты)

raphael.js - будет наилучшим выбором

Спасибо, пойду посмотрю, что это за штука...

Видится четыре слоя друг над другом и анимация с помощью jquery
А так как jquery лепится почти везде, то и raphael подключать не придется.
PS Дизайнер - извращенец
PPS С jquery не придется мудрить с реализацией показа реального состояния процесса, реализовав его через json (как то так)

Вот мне тоже интересно - как это сделать на чистом JS, без библиотек и canvas? Ajax тоже отсутствует.

Пока даже логику не смог нормальную придумать)

October 31, 2012

Имеется вот такой элемент управления:

1. Картинка над полукругом можем изменяться

2. Заполнение черным цветом происходит:

* по окружности (внешний элемент)

* сверху вниз (внутренний)

Вопрос:

Как сделать плавное изменение цвета по окружности (скажем, за 3 секунды)?

Буду рад любым советам, способам и т.д. Хоть скриптами, хоть CSS, хоть как...

Спсибо.

October 18, 2012

Насколько я понял, в HTML5 решили унифицировать работу с интерактивными штуковинами (ссылками, кнопками, чекбоксами и т.п.), особенно в контексте веб-приложений. И ввели абстракцию "команда", которую можно применить к любой из этих штуковин, со специальным DOM API. А заодно, раз пошла такая пьянка, завели отдельный элемент, позволяющий юзать это API напрямую. Т.е. элемент <command> (обычно размещаемый в <head> и не отображаемый), по задумке, хранит некую команду (напр. вызов JS-обработчика), эту команду можно повторно юзать в разных интерактивных штуковинах (напр. в виде <button command="id_команды">), инейблить/дизейблить в одном месте для всего приложения сразу и т.п. Ну а раз все интерактивные штуки могут встречаться в меню (которое тулбар и которое контекстное), то поневоле (в силу единого API) там может встречаться и сама <command> (и это единственный случай, когда она рисуется непосредственно).
А вот дальше всё стало еще страньше и чудесатее. Мозилловцы реализовали-таки контекстные меню, но... решили, что имя "command" неинтуитивно и приводит к путанице (особенно в варианте <command command="id_другой_команды"> — когда одна команда, отображаемая в меню, ссылается на другую, невидимую), и ввели вместо него собственный элемент <menuitem> (который, насколько я понял, уже использовался в их языке описания интерфейсов, XUL). А "HTML5-диктатор" Хикси не захотел внимать мозиллиным доводам. И, насколько я понял, на сегодняшний день получается бредовая ситуация, когда единственная (известная мне) реализация работает не по спеке (и формально невалидна!), а примеры из спеки не работают-таки нигде, и вряд ли спека с реальностью в скором времени сойдутся.
Посмотрим, куда этот маразм вырулит в итоге...

Как я понимаю, предполагалась следующая ситуация. Например, есть приложение, позволяющее что-то делать с картинками. Тогда можно сделать команду, например, вызывающую какое-то действие с картинкой (скажем, наложение спецэффекта):
<command id="doStuffWithImg"
   onclick="doSomeCoolFullyHTML5izedAndCSS3edShinyAndAnimatedStuffWithImage()"/>
положить ее в <head> и обращаться к ней из разных интерактивных элементов:
<button command="doStuffWithImg">Суперэффект для картинки</button>
<img src="картинка-без-эффекта.jpg" contextmenu="menuForImg" title="Кликни правой кнопкой и посмотри, что тут есть!" />
<menu type="context" id="menuForImg">
   <command label="Применить суперэффект по правой кнопке" command="doStuffWithImg" />
</menu>
<button command="doStuffWithImg">А можно вызвать эффект и отсюда</button>
А потом, например, если картинка не активна, можно сделать $('#doStuffWithImg').disable() — и тем самым задизейблить обе кнопки и пункт контекстного меню, связанные с этой командой, в одно действие.
Но это пока лишь в теории (точнее, в голове Хикси)...

Вот теперь более-менее понятно, что же они хотели там написать.

Спасибо за полный развернутый ответ.

October 18, 2012

Как это понимать, где и как это использовать?
Там где и написано.
Внутри menu.
Не понимаю что вызывает замешательство.
Например решил ты сделать wysiwyg
И сделал тулбар как
<menu type="toolbar">
<command type="command">Полужирное начертание</command>
<command type="command">Курсивное начертание</command>
<command type="command">Подчеркнуть</command>
</menu>
Но имей в виду … сейчас это просто элементы, без каких либо дополнительных возможностей, которые даст ПА.
Поддержки то нету. И честно говоря это к лучшему. Сам стилизируешь, сам наделяешь нужным функционалом.
И вообще … куда делся дух эксперементаторов?
Просто попробуй и посмотри что получится.
http://jsfiddle.net/xEZhU/

Ты немного не понял. Я конкретно про ситуацию:

<command command="">

Ведь там написано:

Content attributes:

Global attributes

type

label

icon

disabled

checked

radiogroup

command

October 17, 2012

Нужна помощь экспертов.

Значит, имеется такой тег:

command

Спецификация

У него имеется атрибут:

command

Спецификация

Вопрос:

Как это понимать, где и как это использовать?

Если можно - со ссылками или с примерами.

Что-то не могу разобраться...

Спасибо.

October 9, 2012

В хроме с 2011 года висит такой баг.

Ну, для Chrome и Safari есть идейка - а что с Opera?

October 9, 2012

Собственно, сабж:


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Баг с "overflow: hidden;" и "border-radius: ;"</title>

	<style type='text/css'>
	.wrap {
		width: 200px;
		height: 200px;
		background: red;
		overflow: hidden;
		border-radius: 50px;
		position: relative;
	}
	.el {
		width: 190px;
		height: 190px;
		position: absolute;
		top: 5px;
		left: 5px;    
		background: green;
	}
	</style>

</head>
	<body>

		<div class="wrap">
			<div class="el"></div>
		</div>

	</body>
</html>

Или тут:

http://jsfiddle.net/DjTarik/BCPgg/embedded/result/

В FF и IE все нормально, дочерний блок скрывается. В Opera, Chrome, Safari - нет.

Особенно интересует Opera =)

Спасибо.

September 4, 2012

Правильно ли я понимаю, что PhpStorm - это WebStorm + PHP?

Т.е. Весь функционал WebStorm точно присутствует в PhpStorm?

Кто точно знает (с английским совсем беда =)?

August 9, 2012

Сохранить/загрузить сессию в меню фаил ?

Как вариант, на нужной вкладке правой кнопкой мыши => в другое окно

И там и там переключаться не удобно.

Может есть какие плагины для работы с вкладками?

Типа прикрепить, заблокировать чтобы можно было...

August 8, 2012

Использую Notepad++ каждый день для работы:

1. Всегда открыты несколько вкладок с документами типа "справочник", "ссылки", "temp" (файлы открыты на длительный срок, в течение всего рабочего дня);

2. В процессе работы с разными проектами периодически открываются разные файлы типа "html", "css" и др. код (открываются, правятся, закрываются);

Вопрос:

Можно ли каким-то образом отделить вкладки с "постоянными" файлами (п.1) от вкладок с "периодическими" файлами (п.2)?

Допустим в 2 строки сделать вкладки, или одна группа вкладок сверху, другая - снизу...

Выслушаю любые варианты.

Спасибо.

P.S. Сейчас тупо использую 2 разных редактора: в одном "постоянные" файлы (п.1), в другом - всё, что нужно часто открывать и править (п.2).

July 18, 2012

Можешь попробовать сделать так:
http://jsfiddle.net/6VXWJ/
Трудозатраты — вбить в массив все элементы и запустить в нужных браузерах.

Спасибо. Обязательно все попробую, как только будет минутка времени.

July 18, 2012

Я шо-то не пойму, а JS с его getComputedStyle уже не в моде?

Ну так на нем пока и остановились. Дальше - буду пробовать и смотреть, как он себя ведет.

July 18, 2012

DjTarik, в докладе я как раз говорил, что надо настраивать WYSIWYG под стили сайта.
Можно конечно все это делать и через нормалайз … но мне кажется что это намного более ресурсоемко, чем через reset.
imo reset намного проще в создании использовании.
Я думаю что тут можно увидеть актуальную таблицу стилей для вебкита
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Тут для мозиллы
http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css
Про остальные сейчас подумаю.

Да, настройкой редактора я тоже много занимался) Пришлось как-то даже все конфиги CKEditor-а переводить и руководство писать)

Ну, я много информации промониторил по уже готовым таблицам стилей. Есть наработки, эти ссылки известы.

Но вроде это было бы удобно, иметь такой скрипт, который бы проходил по перечисленным тегам и вытаскивал все стили по дефолту.

ИМХО самая полезная ссылка - это http://www.iecss.com/ =)

July 18, 2012

Фишка нормалайза именно в том, что не нужно учитывать (потенциально) неограниченное множество вариантов — все самые актуальные для отображения свойства (размеры/поля/отступы) явно прописываются с типичными (а еще лучше — нужными по дизайну) значениями. А всякие новые и редкие свойства (особенно префикснутые) пусть будут себе, как авторам браузера взбредет — если они себе не враги, отображение от этого вряд ли пострадает...

Согласен. Если всё грамотно нормализовать - ни тебе проблем с формами, полями, отступами и т.д. (если сравнивать IE и всё остальное)

Где-то, ребят, я вас уже по моему встречал

Я сюда не холливарить пришел, а узнать, можно ли это сделать или нет)

Уже мысли кое какие есть, а это уже хорошо.

Но вдруг кто что еще подскажет)

July 18, 2012

Скорее всего именно вручную.
Opera
Chrome
Safari
FF
IE
Не так уж и много, как мне кажется.
Я не думаю, что версия влияет на таблицу стилей по умолчанию особо.
Хотя проверь, конечно. И для разных ОС тоже )
Я не проверял — это мое предположение.
http://xpoint.ru/know-how/JavaScript/TablitsyiStiley?2 — это тебе поможет. Можешь даже сделать автоматический сбор и анализ.
Но это не нужно.
А еще по-моему normalize — бредовая затея.
Я предпочитаю использовать reset.

Новые версии сказываются, например, при переходе к интертрепации заголовков по HTML5-ному (FF4+, Chr.7+ — размер заголовка не по номеру, а по вложенности секций). Плюс у совсем старья бывали свои спецэффекты (вышеупомянутый "нестандартный" маргин body у IE7-, больший дефолтный отступ между абзацами там же, ненулевой дефолтный padding у body у какой-то ископаемой Оперы типа 8.0 и т.п.).
Насчет холивора ресет vs. нормалайз — лично я предпочитаю нормалайз, но не к "среднестатистическому браузеру", а к тому, как задизайнено в макете для основного контента

Расскажу небольшую предысторию.

Ну, года 1,5-2 назад я, используя "reset" получал кучу проблем с тем, что все стили для визуального редактора приходилось настраивать для публичной части сайта. (Если не ошибаюсь, именно ты (SilentImp) расказывал про редакторы на днях веб-стандартов в Минске, я тогда еще раз про эту проблему вспомнил)

Т.е. получалось, что в админке CMS-ки использовался iframe, в котором был редактор (а соответственно его стили были от дефолтных у браузера). А в публичной части - результат работы редактора выводиться просто в каком-то div-е. И соответственно стили пуличной части (в ней используется "reset") обнулялись и нужно было настраивать все возможности редактора.

Таким образом - я решил отказаться от сборса стилей)

Но, постигая CSS увидел, что дефолтные стили неплохо так отличаются в разных версиях разных браузеров.

Не долго думая тогда, я в ручном режиме вечерами собирал стили по дефолту.

Сейчас у меня имеется таблица с дефолтными стилями для браузеров:

FF 3.5 & FF 3.0

Opera 9.64

Opera 10.51

Chrome 4.1.249.1042 (42199)

Safari 3

Safari 4

IE 6

IE 7

IE 8

На то время это были последние версии =) Проверку проводил для XHTML strict DTD и тегов, которые он поддерживает.

Потом за основу взял FF и написал стиль, который бы перезаписывал все теги со стилями, как у FF. Это стало моим "ресетом" (до сих пор его использую).

Таким образом я получил для всех браузеров одинаковые стили по умолчанию. Зная их, я точно мог что нужно сбросить, что нужно переопределить и т.д. Это было нереально удобно для меня и решало все мои проблемы.

Потом я много работал и не проверял стили в новых браузерах.

Еще позже узнал, что кто-то написал normalize и подумал, что не мне одному это удобно)

А т.к. браузеры очень быстро меняют свои версии и обновляются, я не представляю, как мне узнавать стили по дефолту для них. Ведь руками - это оооочень долго и требует дофига внимательности.

Вот.

Т.е. на данный момент, когда уже и HTML5 в нормально состоянии и времени прошло много - хочу снова взять последние версии и пополнить знания о браузерах, отличиях и т.д. Ну и написать новый "сброс" для личного использования.

Собирать руками больше не хочу) Вот и возник такой вопрос. Сделать страничку, которая бы автоматом создавала таблицу с дефолтными стилями браузера.

Попробую через JS, но не сильно верится, что можно будет обратиться к дефолтной таблице стилей. Но это надо попробовать.

Кто то реально может использовать FF4 или Chr7?
Это маловероятно, если верить статистике.
Стоит, по-моему, проверить IE-шечки и последние версии остальных браузеров.
Все без исключения варианты нормалайз все равно не учтет.

Вариантов действительно много, но основные учтет. Я уже пробовал и результат стоил того.

Буду пробовать еще раз, если найду удобный способ)

P.S. И да - тот normalize.css, о котором все говорят, вроде как далеко не все "нормализует" (хотя и не сильно в него вникал)

P.P.S. Всё вышенаписанное - ИМХО, если что)

July 17, 2012

Если немного перефразировать вопрос, то:

Каким образом создатели normalize.css узнавали дефолтные стили браузеров?

Сомневаюсь, что они делали это вручную (сам пробовал - неделями можно инспектировать). А с таким кол-вом браузеров как сейчас и выпуском новых версий - это не рационально.

Есть ли решение?

July 16, 2012

Ситуация такая:

Всем известно, что разные браузеры по умолчанию отображают одни и те же теги по разному. К примеру, стили "тела" по дефолту в FF 3.5:


body {
    display: block;
    margin: 8px;
}

а в IE7:


body {
    display: block;
    margin: 15px 10px;
}

Вопрос:

Каким образом можно узнать, какие стили по умолчанию имеют разные браузеры и их версии?

Важно, чтобы это было НЕ в ручном режиме.

Может на это способен JS?

Имеется перечень всех тегов - нужно для каждого получить все стили.

Варианты:

- найти в файлах установленных браузеров таблицы стилей и посмотреть

- поставить FireBug и промониторить

- поискать в интернете дефолтные таблицы стилей

НЕ предлагать! =) Пару лет назад я это уже делал.

У кого какие мнения?

Спасибо.

March 16, 2012

Тогда уже надо командный конкурс)

3 человека с форума (дизайн, верстка, програминг) - одна команда =)

January 15, 2012

Читайте внимательнее первый пост. Там указано, что html код выводит скрипт. Изменять скрипт, чтобы он выводил разделители - глупо.

Ага... Сорри, не заметил...

Вот и меня интересует, какие минусы последнего метода, кроме как лишней разметки. Видел, что в templateworld поголовно используют этот метод.

Плюс в том, что можно использовать "специальные символы" и это будет работать в IE6 =))) (хотя уже не актуально)

Минус - лишняя и не семантическая разметка.

Но такой метод ооочень часто вижу. Никто не парится)

January 15, 2012

Что плохого в таком методе:


<ul>
    <li>Пункт</li>
    <li>|</li>
    <li>Пункт</li>
    <li>|</li>
    <li>Пункт</li>
</ul>

Какие минусы?

December 2, 2011

Приветствую.

Вопрос такой.

Решил освежить в памяти знания технологий: html, xhtml, css, xml, dom.

Решил зайти на http://www.w3.org/ и полистать спецификации.

ИМХО, адекватной навигации я там не увидел, поэтому прошу помощи:

—-1. Кто может точно указать ссылки на официальные документы последних версий:

——--1.1. html

——--1.2. xhtml

——--1.3. css

——--1.4. xml

——--1.5. dom

—-2. Ну и хотелось бы узнать, какие версии нынче актуальны для использования

Что нашел:

—-1. Последняя версия html4 - html 4.01 - http://www.w3.org/TR/html401/ - ?

—-2. Последняя версия xhtml - xhtml 1.1 - http://www.w3.org/TR/xhtml11/ - ?

——--2.1. - но вроде как используют xhtml 1.0 - http://www.w3.org/TR/xhtml1/ - ?

——--2.2. - а версия xhtml 2.0 - не закончена и перешла в html5 - ?

—-3. Последняя версия css2 - css 2.1 - http://www.w3.org/TR/CSS21/ - ?

—-4. Последняя версия xml - xml 1.1 - http://www.w3.org/TR/xml11/ - ?

—-5. Последняя версия dom - DOM Level 4 - http://www.w3.org/TR/dom/ - ?

——--5.1. - вот тут вообще не понял. Вроде ж только DOM Level 2 используют?

——--5.2. - не нашел спецификации по каждому из уровней. Они объединены в один?

—-6. Последняя версия html5 - html 5 - http://www.w3.org/TR/html5/ - но она еще в стадии разработки?

—-7. Последняя версия css3 - css 3 - где взять на нее спецификацию? Такую, как на html5, хотя бы предварительную?

Кто в теме, помогите разобраться со стандартами...

(Если можно, отвечать по пунктам)

Спасибо.

October 28, 2011

А white-space + height + overflow разве не поможет?

Не, не поможет) недочитал задание... =(

Sign In

DjTarik

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by DjTarik

Смещение текста в <button> при клике. IE, Opera.

Тег command, атрибут command

Как сверстать такую штуку

Как сверстать такую штуку

Как сверстать такую штуку

Тег command, атрибут command

Тег command, атрибут command

Тег command, атрибут command

Баг с "overflow: hidden;" и "border-radius: ;"

Баг с "overflow: hidden;" и "border-radius: ;"

Текстовый редактор/IDE для JavaScript

Notepad++ вопрос

Notepad++ вопрос

Как узнать стиль элемента по дефолту?

Как узнать стиль элемента по дефолту?

Как узнать стиль элемента по дефолту?

Как узнать стиль элемента по дефолту?

Как узнать стиль элемента по дефолту?

Как узнать стиль элемента по дефолту?

Как узнать стиль элемента по дефолту?

Конкурс по Джумле или WP. Нужен ли?

Вёрстка разделителей списков

Вёрстка разделителей списков

Спецификации технологий

Задача по CSS

Forums

Important Information