Extend the set of support CSS properties in {N}

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}.

Properties related to backgrounds:

And some font properties:

font-family
font-style
font-weight

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

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.

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

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.

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

background-position: right 10px bottom 20px;

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?

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

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

@manijak

@manijak seudo-class

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

@bundyo

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.

@emiloberg

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

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

How about flexbox layout as layout engine?

@emmanuelbuah

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

@valentinstoychev

@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.

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; }

@toddanglin

@toddanglin

Check this link

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

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.

@bundyo

@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)?

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!

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.

@vakrilov

@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.

@vakrilov

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

@dhoffens

@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.

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.

Navigation Menu

Repository navigation

Extend the set of support CSS properties in {N} #191

16 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Extend the set of support CSS properties in {N} #191

Description

Activity

vakrilov commented on May 20, 2015

bundyo commented on May 20, 2015

RangerMauve commented on May 20, 2015

emiloberg commented on May 20, 2015

jlooper commented on May 21, 2015

bundyo commented on May 21, 2015

emiloberg commented on May 21, 2015

manijak commented on May 26, 2015

jamlfy commented on May 26, 2015

emiloberg commented on May 26, 2015

mdgiles commented on Jun 2, 2015

mdgiles commented on Jun 2, 2015

nemephx commented on Jun 6, 2015

16 remaining items

emmanuelbuah commented on Sep 1, 2015

valentinstoychev commented on Sep 7, 2015

emmanuelbuah commented on Sep 8, 2015

toddanglin commented on Feb 14, 2016

t1amat9409 commented on Mar 8, 2016

bundyo commented on Mar 8, 2016

toddanglin commented on Mar 8, 2016

mster commented on Sep 15, 2017

vakrilov commented on Sep 16, 2017

xerxicodex commented on Mar 25, 2018

dhoffens commented on Aug 16, 2018

toddanglin commented on Aug 16, 2018

lock commented on Aug 26, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions