Feature request - HTML web components & full CSS3 properties


#1

Hello,

I like NativeScript but I hate the fact that it uses only a portion of CSS3 properties.
I want to use text shadow, box shadow, and all existing CSS3 styles available on normal web development environment.
Also, I realized HTML5’s web component such as input slider are not available on XML. XML has its own but it can’t be styled like HTML5 web components.

So here’s my request. Please make all CSS3 styles and HTML5 web components available on NativeScript.
CSS3’s key style properties are text shadow and box shadow. I’m surprised NativeScript omitted them.

Thanks,


#2

I would also love to have all CSS3 features but it will be a lot of work to map all CSS3 features in specific platforms. I think NativeScript has already covered most essential ones.

If you are looking for specific feature then it makes sense to create a issue in Github. When more people vote for same, the team may implement that.

Or you can always write a plugin to solve it.


#3

That’s huge, would you be interested in contributing with time of your own? We’d certainly appreciate it.

https://github.com/NativeScript/NativeScript is where you can get started, it’s also where the css and view elements are implemented.


#4

I thought Telerik guys manage & develop NativeScript?

These Text-shadow, box-shadow properties are essential CSS3 style elements. They allow you to create anything you imagine.
You can build something like this with CSS3 box shadow:

Not being able to create this fascinating UI elements by missing CSS3 properties is a really bad idea. React Native comes with nearly full CSS3 properties too.

I’d like to see all CSS3 properties becoming available on NativeScript XML. Also, HTML web component should be there. There are too many good pre-made html web components on the internet.


#5

NativeScript is not Cordova. It allows us to use web skills (XML / CSS / JavaScript / TypeScript / Angular / Vue) to build pure native apps. It is not a WebView that renders HTML/CSS.

So if at all I need a clock in my app, I would prefer to use any existing native library / widgets. For example,

iOS

Android


#6

You can do so much more with CSS3 than just clock. Everything you can do on photoshop is possible to emulate with CSS3. This includes 3D style user interface.

Omitting key CSS3 properties was a really bad idea…
I hope NativeScript team will add all CSS3 shortly.
React Native on the other hand still ships with usable portion of CSS3 with their own StyleSheet.
All developers should be against this miniaturized CSS3 on NativeScript.


#7

If you want all the CSS properties, use a PWA platform like Ionic. Web development !== Native development. All those CSS properties you want have to be linked to underlying native properties to handle their styling equivalents.

This is far from easy, especially when working with complex view types. Anything stylistically you want to accomplish can be through NativeScript by either a 3rd party plugin (i.e. there is a drop shadow plugin) or accessing the native API layer.

NativeScript’s mantra is not “we are just like React Native” or “build native apps using web css”. It is:

Build amazing iOS and Android apps with technology you already know
Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.

When you try to encompass too much with a framework, you lead to performance hits, knowledge gaps or worse: failure. The NativeScript team has been very deliberate about the properties they support and are always welcoming to a PR to introduce new ones. When you are using these properties, it needs to be crystal clear of the underlying native CPU required to accomplish it.

I don’t think you understand what NativeScript is, which is why you are expecting all these “web things” to work with it.

EDIT:

Alternatively, pass all your raw HTML and CSS into an WebView. It’ll render just like a PWA will, but is less extendable and modular in nature.


#8

That is a different point of view.
Implementing more CSS3 properties opens door to new level of UI design.
What you’re telling me doesn’t make any sense… React Native runs fine with text-shadow, box-shadow, filter CSS properties without hurting CPU. In my opinion, those missing properties should be implemented ASAP.

I will try WebView. Thanks,


#9

NativeScript handles the JS hand-off of pointing those CSS properties into native property instantiations. Adding complex selector supports (i.e. shadows, filters, etc.) requires more intensive code than just assigning a single property on a native view base. In some regards they may have to construct a whole other view natively, apply a variety of manipulations to it and then append your original view as a child to the newly constructed view.

All of this comes at a performance cost. Each view constructed is another burden for initial draw time, refresh time, garbage collection, etc. The NS team takes very deliberate approaches to the selectors they support, based on the ease-of-implementation as well as demand.

Is just the tip of the implementation ice-berg that React Native went through to support their take on text shadows. They essentially wrote an API wrapper for the iOS portion (natively) and then have other classes to conveniently access these properties/methods.

This is no different than finding any iOS or Android library that adds this support to the native platforms and creating a NativeScript plugin around it. For example the shadow plugin:


#10

A solution for Native Script:

Implement native CSS shadow, 3D properties & filter and automatically disable them when they’re not used in project.

Hope this helps…no kidding.
I see this as a viable solution to implement missing CSS3 styles.


#11

Talking Is Easy, Show Me The Code :wink:

NativeScript is open source so you can contribute.

And as other have pointed out you seem to be mixing web view based development and native components.


#12


#13

@designer24 Please refer to NativeScript code of conduct we are not here for trolling