I am trying to make progress loader component in Bobril, but I do not know how to add keyframes rule. Is there any way how to handle keyframes in Bobril.
AFAIK there is no direct support for keyframes in bobril, but you can still use b.injectCss() to directly inject keyframes definition and then use it as usual in b.styleDef() or b.style().
PS: Because of the lack of direct support, you should ensure uniqueness of the keyframes name by your own means.
Related
I used to write OpenGL2.1 apps on C++. Now i am working in HTML5, because i have strong belief it going to be single UI platform.
I know that a lot of CSS3 animations/rules can be forced to GPU. But, none of them allow "user-level" computations.
I know that its not what CSS was designed for, but how can i make animation with simple math on pure CSS? I don't like idea of CPU wakeups.
As an example, simple task, easily solved by shaders with 0 CPU actions:
Timer on pure CSS
.
But it has an issue: it never stops. So, am I able to apply simple conditions? Like stop when animation-stop: 'content' < attr(target)
Mainly for education purposes.
A few ideas:
animation-iteration-count (MDN) is the simplest condition I could think of.
You could also use CSS Custom Properties (aka "CSS Variables") with a bit of JS:
:root {
--count: 19;
}
.selector {
animation-iteration-count: var(--count);
}
Now in JS you just have to modify a single value and that new value is instantly used in many declarations.
With JS, you can toggle class on HTML elements and CSS rules will or won't match depending on their selector rules.
Demos:
Update CSS Variables with JS
Parallax 3D Button with JS controlled CSS variables
You could also see "Conditions" for CSS Variables and CSS locks
But if you want to make something happen or stop, outside of hacks/trick kind of abusing CSS or with overcomplicated code, then JavaScript and DOM Events are the way to go.
You're speaking of GPU, computation, OpenGL so just in case: if you need computation intensive JS then give a try to ServiceWorkers. They can't modify the DOM but they'll run in the background crunching some numbers.
It is possible?
I mean this:
<div style="?css animation?"> Content </div>
It can be any tag, or maybe triggering the animation or transition from other tag.
This question is because I will like to use animations and transitions in a web app, but this app just let me use css included in the style tag attribute.
Pseudo clases I guess are out of the question so I can not trigger transitions, neither I can use javascript, so onmouseover or similar kind of stuff are out of the question.
Animations on the other hand needs their keyframes settings, and I can not set keyframes inside a style tag.. (or can I?). I read something similar here:
https://css-tricks.com/animate-to-an-inline-style/
But I guess it would not work for what I am asking.
Not sure if there is a hack to import a css from an attribute or just achieve animations in chrome browsers (another thing, I have not access to the head section of the html).
Yeah I know, it seems mission impossible, I was just wonder in case there is some kind of trick to achieve this even if the animation is very limited.
Thanks for your time.
No, afaik.
Atleast not for those animations that require :hover or keyframes as you mentioned. However, it is possible by including animations attached to <style> contained within the same html page. Or by injecting css code using js code on the same html page . This suits if you are okay with CSS resting in the same file.
The link you've mentioned is NOT using inline CSS for animation; it has a separate CSS file.
Has anyone had issues with LESSCSS and #keyframes or #-ms-keyframes? It compiles the CSS fine for #-webkit-keyframes, #-moz-keyframes and #-o-keyframes.
These are whitelisted, -ms is missing. keyframes should work: https://github.com/cloudhead/less.js/blob/master/lib/less/parser.js#L988
There is an open request for a fix: https://github.com/cloudhead/less.js/pull/498
The common workaround is to put keyframes in a separate .css file that you import - files with a .css extension are not parsed by LESS.
Keyframes generation seems to be very compicated in LESS, that is why appeared different hacks and tools such as:
https://github.com/kuus/animate-me.less
A bit complicated mixin generating both keyframes and animation with a single call. Accepts both animated elem selector and keyframes css content as strings. Up to 10 steps in keyframes
https://github.com/thybzi/keyframes
My tool inspired by animate-me and other solutions. Generates keyframes only. Animation needs to be applied separately - which allows to apply multiple animations to a single element, and also the same keyframes to multiple elements. More actions needed to create keyframes, but uses true css/less way to generate their style (so you can use variables, operations, functions and mixins there). Up to 16 keyframes steps
Let's say I have widget that uses complicated CSS, and must be embedded in multiple websites that all have their CSSes.
If I prefix all widget's CSS rules with "#widget", they won't apply to anything on the outside, so one problem fixed. Unfortunately CSS rules of the site can still mess the widget.
If I reset all CSS inside #widget with proper reset rules, then hopefully they will override all outside rules, right? (because my rules use #id and outside rules don't know any ids inside my widget, they cannot override them, right? !important notwithstanding)
What's the best way to reset all CSS to known state? Most CSS resets start from browser defaults, they don't reset arbitrary CSSes. Is there any CSS reset that works no matter what?
I came across cleanslate.css while trying to solve the same problem:
https://github.com/premasagar/cleanslate
I've not use it in production yet, but it apparently came out of the development of the BBC World Service widget.
Yes, your css should override anything declared outside the widget, but your reset must be quite comprehensive. I suggest using a modified version of http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, but you'll have to modify all the selectors yourself.
I would be tempted to strengthen your selectors also, so rather than
#widget tagname{}
Use
html body #widget tagname{}
Your selectors will now have a much higher weight.
Use namespace & reset & LESS
#my-ns {
#import ".../reset.less";
... your other styles ...
}
I use Eric Meyer's reset reloaded to reset CSS styles.
Link:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
I have a WebView displaying a HTML page, linking to a CSS file.
The CSS file makes use of the pseudoclasses :active and :hover for rollover effects.
Q. How can I tell, in my WebView, when :active and :hover have been called? I would like to intercept these calls and act on them programmatically within Cocoa.
Thanks.
:active and :hover aren't calls; they're CSS pseudo-classes, for use in CSS selectors. You use them in CSS to select elements to style. They're adjectives, not verbs.
Try adding JavaScript event handlers to the elements instead. You can use a WebScriptObject to project some of your Cocoa methods into the JavaScript space for use from the event handlers.
I'm looking in the 2.2 SDK docs, and I don't see anything in the UIWebViewDelegate protocol. The best hope of accomplishing this maybe the instance method in UIWebView called stringByEvaluatingJavaScriptFromString. Unfortunately that would probably imply some kind of polling, as there seems to be no way to define an Objective-C method that JavaScript could call back on for such an event. I might be wrong, but I don't think it can be done (in 2.2).