{"id":363,"date":"2016-08-10T20:29:32","date_gmt":"2016-08-10T20:29:32","guid":{"rendered":"http:\/\/fluentreports.com\/blog\/?p=363"},"modified":"2016-08-10T20:29:32","modified_gmt":"2016-08-10T20:29:32","slug":"nativescript-css-selectors-pseudo-selectors-in-2-2-0","status":"publish","type":"post","link":"http:\/\/fluentreports.com\/blog\/?p=363","title":{"rendered":"NativeScript: CSS Selectors & Pseudo Selectors in 2.2.0"},"content":{"rendered":"

The NativeScript team released a feature under the cover of dark; not even listed in the change log; but Panayot; did a refactoring of the CSS selector system in NativeScript. With his changes he has not only sped up the selector code in most cases but he added some additional features like<\/p>\n

[myAttrib="yes"] &gt; .figure { color: red; }<\/code><\/p>\n

And fixed several things that were broken in earlier versions like:<\/p>\n

 .android.landscape\u00a0 Button {\u00a0 background-color: blue; }\n.landscape.ios Button { background-color: green; }<\/code><\/pre><\/p>\n
If you understand why this is so important; this opens up CSS a LOT.\u00a0\u00a0 For example; I have two plugins; nativescript-orientation, and nativescript-platform-css.\u00a0\u00a0\u00a0 Orientation automatically will put landscape<\/code> as a class of the <Page> when you are in landscape mode; this allows you to have custom css for landscape mode.\u00a0\u00a0 It allows a lot of flexibility.\u00a0\u00a0 However, when I created the platform-css plugin it automatically adds ios<\/code> or android<\/code> to the Page classes.\u00a0 Again this added a lot of flexibility as you could in a single css file do:<\/p>\n
Button.ios { margin: 20; }\nButton.android { margin: 15; }<\/code><\/pre><\/p>\n
To allow you to style the buttons so they look properly on each platform.\u00a0\u00a0 However the OLD CSS style system would not detect that \"landscape ios\" should use the rule:<\/p>\n
.landscape.ios Button {}<\/code>
\nor
\n.ios.landscape Button {}<\/code><\/p>\n
So, originally\u00a0 I had to add a HACK to my NS-orientation plugin to detect if you were using my platform-css plugin so that it could create a special css class rule to allow the second rule (.ios.landscape) to work as expected.\u00a0\u00a0 Now with the all new css selector system in 2.2.0; it all works properly; and ALL variations of the rules are valid and I don't have to do anything extra!<\/p>\n
Major Kudos from me to Panayot<\/strong>!\u00a0\u00a0 This fixed a number of other weird CSS corner cases that have been in the issues list for a while.\u00a0 So this was a imho one of the best new features of 2.2.0...<\/p>\n
Now, there is another awesome new feature that Panayot did; he has pseudo selectors; at this moment the button now supports both a normal<\/code> state and a highlighted<\/code> state.\u00a0 So you can do:<\/p>\n
Button:highlighted {
\nbackground-color: cyan;
\n}\"nativescript-pseudo\"<\/a><\/p>\n
And the button will change to a cyan background when clicked and on Android 5+ you will still even get the ripples!\u00a0\u00a0\u00a0 Awesome job Panayot!<\/p>\n","protected":false},"excerpt":{"rendered":"
The NativeScript team released a feature under the cover of dark; not even listed in the change log; but Panayot; did a refactoring of the CSS selector system in NativeScript. With his changes he has not only sped up the selector code in most cases but he added some additional features like [myAttrib="yes"] &gt; .figure… Continue reading NativeScript: CSS Selectors & Pseudo Selectors in 2.2.0<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-363","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=363"}],"version-history":[{"count":1,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/363\/revisions"}],"predecessor-version":[{"id":365,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/363\/revisions\/365"}],"wp:attachment":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=363"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}