адаптация web css для sciter - Продукты TerraInformatica

В данный момент портирую jquery-ui css под сцитер. http://jqueryui.com/themeroller/ (Download Theme справа для получения сss и картинок)
И вопрос возник:
Какие css атрибуты не поддерживает сцитер из широко используемых в web cross browser css?
Может у кого был подобный опыт? На что стоит обратить внимание?

На данный момент выяснил, что можно смело удалять следующие:

filter
-moz-border-radius-*
-moz-border-radius
-webkit-border-*-*-radius
-webkit-border-radius

Да и вообще всё что начинается с -moz и -webkit по определению не должно работать в сцитере.

PS:
Попутно выяснил что в сцитер есть поддержка синтаксиса:

border-*-*-radius:

Где первый * это bottom или top
а второй * это left или right

И такой код будет работать:

border-top-left-radius: 4px

Здравствуйте, Antik, Вы писали:

A>В данный момент портирую jquery-ui css под сцитер. http://jqueryui.com/themeroller/ (Download Theme справа для получения сss и картинок)
A>И вопрос возник:
A>Какие css атрибуты не поддерживает сцитер из широко используемых в web cross browser css?
A>Может у кого был подобный опыт? На что стоит обратить внимание?

Имхо портирование css в лоб практически бесполезно — слишком много придется переделывать.
Например:
* любая порядочная библиотека для веба должна себя пристойно вести со всем зоопарком браузеров, в том числе устаревших, что отражается на css тоскливым образом
* в h-smile есть несколько простых вещей вроде %%, flow, которые значительно изменяют правила игры по сравнению с веб-разработкой

Ссылки в помощь
http://www.terrainformatica.com/htmlayout/cssmap.whtm
http://www.terrainformatica.com/htmlayout/selectors.whtm
http://www.terrainformatica.com/wiki/doku.php

Здравствуйте, Antik, Вы писали:

A>В данный момент портирую jquery-ui css под сцитер. http://jqueryui.com/themeroller/ (Download Theme справа для получения сss и картинок)

'c' в sciter или не произносится вообще (как в слове scintilla) или
произносится но как 'к' (как в слове Scotia).
Т.е. либо "сайтер" либо "скайтер" — на выбор.

A>И вопрос возник:
A>Какие css атрибуты не поддерживает сцитер из широко используемых в web cross browser css?
A>Может у кого был подобный опыт? На что стоит обратить внимание?

Из тех что поддерживает скажем IE7 и FF вместе то наверное все.

A>На данный момент выяснил, что можно смело удалять следующие:
A>

A>filter
A>-moz-border-radius-*
A>-moz-border-radius
A>-webkit-border-*-*-radius
A>-webkit-border-radius
A>

A>Да и вообще всё что начинается с -moz и -webkit по определению не должно работать в сцитере.

Если потребуется использовать sciter specifics в CSS то можно так:


  div#sample { 
    width:100px; 
    height:100px; 
  }

  @media sciter
  {
    div#sample { size:*; }
  }

Здравствуйте, ShaggyOwl, Вы писали:

SO>* в h-smile есть несколько простых вещей вроде %%, flow, которые значительно изменяют правила игры по сравнению с веб-разработкой

К вышесказанному добавлю еще эту ссылку:
http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
Это про flex units ( например height:* ) и flow CSS property.

Здравствуйте, c-smile, Вы писали:

CS>К вышесказанному добавлю еще эту ссылку:
CS>http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

Спасибо за ссылки.

"CSS Flexible Flow" очень нужен в web css, я это ещё год назад понял когда первый раз на сц.. скайтере gui делали, называли правда не правильно всей конторой всё это время, но это мелочи. В web css есть запары, которые в h-smile и в скайтере естественно очень тонко и грамотно ликвидированы. За что большое спасибо terrainformatik`e и её, как я понимаю, немногочисленным сотрудникам.

По теме выяснил, что свойство !important работает как положено. В доках и семплах про это упоминания не нашёл.

Здравствуйте, Antik, Вы писали:

A>Здравствуйте, c-smile, Вы писали:

CS>>К вышесказанному добавлю еще эту ссылку:
CS>>http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

A>Спасибо за ссылки.

A>"CSS Flexible Flow" очень нужен в web css, я это ещё год назад понял когда первый раз на сц.. скайтере gui делали, называли правда не правильно всей конторой всё это время, но это мелочи. В web css есть запары, которые в h-smile и в скайтере естественно очень тонко и грамотно ликвидированы. За что большое спасибо terrainformatik`e и её, как я понимаю, немногочисленным сотрудникам.

A>По теме выяснил, что свойство !important работает как положено. В доках и семплах про это упоминания не нашёл.

CSS в принципе реализован на уровне CSS 2.1. За исключением:
не поддерживаются counters http://www.w3.org/TR/CSS2/generate.html#scope, ::before/::after и quotes property.

+ добавлено много чего поверх: flow, expandable backgrounds, градиент (background-color: red blue green yellow), transition и всяко-другого по мелочи.

c-smile, похоже небольшой глюк обнаружил. Вот пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
    background: white;
}

.test {
     margin: 20px;
     background: green;
     opacity: 0.7;
     width: auto;
}

.test:hover {
     opacity: 0.3;
}

.test2 {
     margin: 20px;
     background: #00FF0070;
     width: auto;
}

.test2:hover {
     background: #00FF0030;
}
</style>
</head>
<body>
<button class="test">Test button</button>

<div class="test">Test div</div>

<button class="test2">Test2 button</button>

<div class="test2">Test2 div</div>

</body>
</html>

Opacity как я понял негласно поддерживается. При изменении свойства opacity на теге button, кнопка пропадает на момент и потом появляется с новым значением opacity. На дивах такой проблемки не обнаружил, также этой проблемы нет если opacity применяется прямо к бекграунду через формат #RRGGBBOO. Глюк не критичный, button можно дивом заменять.

Здравствуйте, Antik, Вы писали:

A>c-smile, похоже небольшой глюк обнаружил. Вот пример:

Это by design

Измените вот так:

.test {
     margin: 20px;
     background: green;
     opacity: 0.7;
     width: auto;

     transition:none; // here
}

Здравствуйте, eudo, Вы писали:

E>

E>.test {
E>     margin: 20px;
E>     background: green;
E>     opacity: 0.7;
E>     width: auto;

E>     transition:none; // here
E>}
E>

Спасибо, помогло.

	От:	Antik
	Дата:	08.09.10 15:11
	Оценка:

От:	ShaggyOwl	http://www.rsdn.org
Дата:	08.09.10 15:31
Оценка:

От:	c-smile	http://terrainformatica.com
Дата:	08.09.10 16:41
Оценка:

От:	c-smile	http://terrainformatica.com
Дата:	08.09.10 17:17
Оценка:

	От:	Antik
	Дата:	08.09.10 20:41
	Оценка:

	От:	eudo
	Дата:	09.09.10 12:46
	Оценка: