Nativescript: Extend the set of support CSS properties in {N}

[valentinstoychev]

Currently we have a limited set of CSS style properties support and we are planning to extend the list of supported properties with our next releases.

Please comment below what additional properties you would like to see supported as part of {N}.

[vakrilov]

Properties related to backgrounds:

• [x] background-color
• [x] background-image
• [x] background-position
• [x] background-repeat
• [x] background-size

And some font properties:

• [x] font-family
• [x] font-style
• [x] font-weight

[bundyo]

These would be nice in no particular order:

• inherit/initial/default
• overflow/-x/-y
• box-shadow
• border (current XML element is rather strange, maybe the element can be automatically wrapped with it upon encounter of this property?)
• background-size
• left/right/top/bottom with width/height auto for absolute layouts? Width and height can't help much when the View changes its size.
• text-transform/text-decoration
• text-shadow
• transform?

Low priority, for bling mostly:

• filter
• @supports() type of queries

[RangerMauve]

Would Flexbox ever be considered, maybe using Facebook's existing css-layout code? As I understand it, however. The absolutely positioned css wasn't considered because it it'd require NativeScript to implement its own layout engine.

[emiloberg]

Not so much a property as a value: Sizes (width/height) as percentages

[jlooper]

I would really like to have background-image property options supported, especially no-repeat and -x/-y. This is a showstopper for an app I'm working on now.

[bundyo]

Also, when adding support for background-position, please consider the little known right/bottom offset positioning, for instance:

background-position: right 10px bottom 20px;

[emiloberg]

font-weight because currently the only way of setting font-weight is

        <Label>
            <Label.formattedText>
                <FormattedString>
                    <FormattedString.spans>
                        <Span text="My bold text" fontAttributes="Bold" />
                    </FormattedString.spans>
                </FormattedString>
            </Label.formattedText>
        </Label>

Or am I missing something?

[manijak]

What about state-selectors? To be able to style pressed or hover effects?

button:pressed{
  background-color:#FED700;
}
.mybutton:pressed{
  background-color:#FED700;
}

[alejonext]

@manijak seudo-class

[emiloberg]

I don't know if you've a plan set for solving animations. One way to do it would be to transpile the transform and transition properties into something the mobiles understand

[mdgiles]

Agree with @bundyo that having Border element as xml is strange. It also prohibits different styling for different sides of the border which are necessary eg:
border-top-width,
border-bottom-width

and so on for left and right, and other suffixes style and color.

[mdgiles]

+1 @emiloberg sizing (widths / heights) as percentages are needed.

[nemephx]

I need font-family and font-weight asap :)

[sharesoft]

It would be useful if you could specify different border-radius values for each corner as you can with CSS in browsers. For example: corner-radius="3 0 0 3"

[EvanWieland]

::before and ::after are really useful.

[bradmartin]

fonts, borders, and psuedo selectors for buttons would be great. Currently, on Android there is no indication the button is 'active' or 'pressed'.

[vakrilov]

@manijak @bradmartin There is a separate issue(#50) about pseudo selectors.

[emmanuelbuah]

How about flexbox layout as layout engine?

[valentinstoychev]

@emmanuelbuah flexbox is definitely possible. Where do you see it adding more value compared with our current layout implentation?

[emmanuelbuah]

@valentinstoychev Its widely known/used since its part of the css 3 spec. It will make it easy for developers coming from the web tech to get up and running rather than learn a new layout engine. This by no means assert that the current layout engine is bad. I just think adaptation will be faster and easier for devs coming from js/web tech.

[toddanglin]

Is the CSS content property being evaluated, too?

Would be useful as a way to change text/font icons via CSS classes. Example:

.myClass{ content: '&#xf09f'; color: #000; }

[t1amat9409]

@toddanglin

Check this link

https://docs.nativescript.org/ui/icon-fonts

[bundyo]

The CSS content property is only valid for before/after pseudo elements and I'm not sure of the viability of pseudo-elements in NativeScript.

[toddanglin]

@bundyo That makes sense. I hadn't thought about the complexity of supporting the pseudo elements. Worth some extra thinking.

The scenario I was after was the ability to use CSS (only) to change icons in a button. Something like:

.btn { font-family: 'Ionicons'; }
.play { content: '\uf33b'; }
.pause { content: '\uf34b'; }

<button class="btn play" />

Using this approach, you could just add/remove CSS class to change icons. Absent this support, some JavaScript is required to manually change the "text" property of the button. I'm doing it today with converters, but CSS class would be more elegant/web familiar.

If pseudo elements cannot be supported in NativeScript, maybe this is an edge case that justifies allowing the content property in NativeScript to set an element's "text" property (if available)?

[mster]

I know this is an older issue, but I would love to see :hover and button animation features if possible. Being able to use a similar css style like that of Angular4 would make my day!

[vakrilov]

Hi @michaelsterpka Can you please elaborate more on those features and properties and in what cases you would want to use them. For example - on a mobile device there is rarely a mouse pointer so :hover is hard to achieve.

[jamezilla0]

@vakrilov :hover = :tap in my opinion as when I set the :hover pseudo selector for web apps, it automagically gets converted to a tap trigger when viewing from mobile.

[dhoffens]

hey @vakrilov i saw on another thread that you were working on ::after and ::before selectors way back ... did those ever make it in? Or is there another workaround you could recommend? I'm trying to add '%' and '$' to two items, but would rather do it on the CSS side so that I can still do math stuff with the numbers

[toddanglin]

@dhoffens The most direct way to do that kind of formatting in {N} today is to use data binding "expressions" (or "converters" if you're using Angular). Here are some docs on the topic:

https://docs.nativescript.org/core-concepts/data-binding#using-expressions-for-bindings

If you're using Angular with {N}, follow this guidance instead:
https://docs.nativescript.org/core-concepts/angular-data-binding#data-converters

In both cases, these techniques let you modify the presentation of model without changing the actual values. Hope this helps.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.