English French German Spanish Russian
Ingame browser capabilities - Web Apps - Ryzom Community ForumHomeGuest

Web Apps


Ingame browser capabilities

2019-05-10
  • added css processing from <style> and <link rel="stylesheet">
    <link> will block rendering of the page until all files are downloaded
    css files are cached locally same as images
    • element tag, id, class, attr selectors
    • combinators (p+p, p~p, ul>li, ul li)
    • :only-child, :first-child, :last-child, :nth-child(An+B) pseudo classes
    • ::before, ::after pseudo elements. attaching these on block level element (ie table) may not work as intended.
  • <button> can be used outside <form> element for submit action.
    <button form="formid" name="submit" value="submit value">text goes here</button>
    <button form="formid" name="submit" value="submit value"><img src=".."></button>
    Avoid changing text style inside button as it does not render correctly (splits button into multiple parts)
    <button form="formid" name="submit" value="submit value">text <span>goes</span> here</button>.
  • <meter> - webkit prefix pseudo elements can be used to change the background-color
    :-webkit-meter-bar, :-webkit-meter-optimum-value, :-webkit-meter-suboptimum-value, :-webkit-meter-even-less-good-value,
    <style>meter::-webkit-meter-optimum-value { background-color: blue; }</style>
  • <progress> - webkit prefixed pseudo elements can be used to change the background-color
    <style>
    progress::-webkit-progress-bar { background-color: red; }
    progress::-webkit-progress-value { background-color: yellow; }
    </style>
  • "font:inherit" to inherit all font attributes from parent element
    <style> input, textarea { font: inherit; }</style>
  • pt, em, rem size units. These can be used in font-size, width/height values.
    1pt = 0.75px, rem uses font-size from <html> element.
  • a.ryzom-ui-button, input, textarea width/height can be changed using css
    <style>textarea { width: 20em; height: 5em; }</style>
  • background-color for buttons/links/textarea
    <style>input[type=submit], a.ryzom-ui-button { background-color: blue; }</style>
  • -ryzom-background-color-over css property for mouse over effect for buttons/links
    <style>
    input[type=submit], a.ryzom-ui-button { -ryzom-background-color-over: yellow; }
    input[value="Delete"] { -ryzom-background-color-over: red; }
    </style>
  • css background shorthand parsing for those elements that make use of it

---

Hello!
Show topic
Last visit Thu Jun 27 04:19:26 2019 UTC
P_:

powered by ryzom-api