JavaFX Color в CSS

Внешний вид компонент JavaFX настраивается в CSS. Соответственно, должен быть какой-то конвертер стандартного javafx.scene.paint.Color в CSS-friendly формат.

Возможно, он и правда есть - но я его не нашёл. К тому же, внутри класс Color устроен немного по-другому: насыщенность цвета в свойствах getRed, getBlue и getGreen задаётся double-числом от 0.0 до 1.0.

И вот что получилось:

public static String colorToJson(Color color){
   return String.format("#%02X%02X%02X",
                 (int)(color.getRed() * 0xFF),
                 (int)(color.getBlue() * 0xFF),
                 (int)(color.getGreen() * 0xFF));
}

На выходе из COLOR.Red получается правильный #FF0000.

Выглядит симпатично и немного напоминает чистый C :).Правда, прозрачность потерялась.

А если заглянуть в стандарт CSS, то выясняется: уже давно можно задавать цвет как rgba(0, 0, 255, 1.0).

А значит, наш код можно переписать вот так (formatter нужен, чтобы вместо точки в десятичной дроби не завелась запятая):

public static String colorToJson(Color color){
  StringBuilder sb = new StringBuilder();
  Formatter formatter = new Formatter(sb, Locale.US);
  formatter.format("rgba(%.0f, %.0f, %.0f, %.1f)", color.getRed() * 0xFF, color.getBlue() * 0xFF, color.getGreen() * 0xFF, color.getOpacity());
  return sb.toString();
}

CSS: @import

Оказывается, в CSS можно делать include. Синтаксис вот такой:

@import url("filename") [type]

Типы бывают:

• all - Все типы. Это значение используется по умолчанию.
• aural - Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
• braille - Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
• handheld - Наладонные компьютеры и аналогичные им аппараты.
• print - Печатающие устройства вроде принтера.
• projection - Проектор.
• screen - Экран монитора.
• tv - Телевизор.

Часто ли вы видите CSS-вёрстку на экране телевизора? Жалко, что там их не применяют. Можно бы было вырезать рекламные паузы через ADBlock.

С мест сообщают, что мобильные браузеры не понимают @import, если путь файлу не обрамлён url. Хотя по стандарту:

Работающий вариант:

@import url("filename") [type]

И не работающий:

@import "filename" [type]

эквивалентны.

И ещё – IE 7 не поддерживает типы. Более того, если указать тип, то он перестаёт подгружать и сам файл.

Click() doesn’t work in Chrome and Safari

Иногда нужно сделать, чтобы файл загружался не через форму по умолчанию (которая отличается у разных браузеров), а по нажатию на кнопку. Форму прячут, вместо неё ставят кнопку и вызывают по щелчку для неё click() для спрятанной формы.

Как правило, это работает. Но в браузерах на движке WebKit (например, Chrome и Safari) может и не сработать. В частности, Safari игнорирует click() по скрытым объектам.

Поэтому надо скрывать “народным” способом, чтобы не поломать вёрстку:

Вместо:

display: none;

Поставить в CSS:

width: 0px;
height: 0px;
position: absolute;

WordPress Plugin длиной в одну страницу

Моя статья на Хабре о том, как я писал Rikki's WP Social Icons:

WordPress Plugin длиной в одну страницу

Checkbox в Chrome и Safari

В браузерах, основанных на WebKit, иногда портятся checkbox-ы. Девид Уолш описал проблему и дал великолепное решение:

.checkboxList li { /* ..or whatever the parent is */
  line-height: 20px;
}

JavaScript: Стиль для read-only

Как изменить стиль для input'ов, для которых выставлено readonly="readonly"? По идее, в css:

input[readonly="readonly"]
{
 color:  #707070;
 cursor: default; 
}
textarea[readonly="readonly"]
{
 color:  #707070;
 cursor: default; 
}

Это работает в Firefox, Opera, Chrome и, наверное, Safari. А вот в IE - нет :(.

Поэтому напишем код, который цепляется к OnLoad и будет работать только в IE (другим браузерам window.attachEvent и className неизвестны).

function setReadOnly(){
  var el, els = document.getElementsByTagName('input');
  for (el in els)
    if (els[el].readOnly && typeof(els[el].className) != "undefined")
      els[el].className += ' readonly';
}
if (window.attachEvent) 
  window.attachEvent('onload', setReadOnly);

А потом добавим в css обработку для этого класса:

.readonly
{
 color:  #707070;
 cursor: default; 
}

Не забудьте дописать в скрипт обработку для textarea.