 The next section is by Dr. Deviprasad. Deviprasad heads the Agandini Department of Air and Goversov. And he is going to talk about CSL, Cigarette and Animations. So just for the announcement, we have two sessions left. So after Dr. Deviprasad, there is Siddharth Pramila. And after that we are going to be break for lunch. So Goversov has arranged for lunch in the canteen. So please don't leave. You can stay here. We will be around for a while. So if there are any concerns, you can hang out with us and talk to us about anything you want to talk about. Can you hear me? Yes. So, yeah, after hearing Sunil's introduction, it was great that he brought up certain things about JavaScript and the fact he mentioned stepsheets also. Let's have a look at what browsers can do with CSS and how they really complement JavaScript. Sunil's theme was that JavaScript is really a JavaScript that can make things portable, can design things. But the basic idea behind CSS is to separate styles from content. So my idea is I'm a little confused at this point to be honest with you because I would be going back and forth on many things. I want to have some kind of hands-on with Sunil who was mentioning Infective Map. So I was thinking, go ahead and edit the content, edit CSS and then show how the whole thing reflows and so on. So let me see how comfortable I'll be standing here. So excuse me, there is a little bit of jarring when I go back and forth. So if you see the first few slides here, it looks giveny, looks childish, of course. But then what's happening here is that this whole presentation is going on the top. So I'm using Google Docs and I'm using the Docs presentation. So you saw his small animation there that wasn't done with any JavaScript or anything. So what's up with this today? So what we would like to do is today to take a look at how CSS can help us organize content and representation. Then how browsers do CSS. This is also important. And as I can show there, I'm interested in two browsers. One is Google's Chrome and another is Firefox. For various reasons, both philosophical and practical. Google Chrome because I haven't improved Apple Safari here because I'm not using a Mac. This is something that works on Ubuntu or Windows also. So for people who are familiar with both of these browsers, we will be taking a look at the way these browsers do CSS So feel free to interrupt me. Feel free to ask questions. So it would be more fun if you have questions and try to answer them. So that is our interest story. I hope you understand. As Sunil was saying, all of the browsers are very complex. So he was mentioning a few things about how JavaScript runs everywhere and some of the few useful browsers. The basic thing is that there are too many parts working in the browser today. They are complex for various reasons. They are not complex just like that. By design, they are very complex because they do many things. Browsers are the operating systems these days. They have a virtual sandbox, a virtual machine, which runs all these things. So HTML files, CSS tree, JavaScript. And for those who like games or looking at your technologies, web cheer, and of course security is always a concern. So if you look at these things, people use browsers for various things starting from entertainment, just watching the web, seeing content on the web, to even transactions that will do, business that will do all the browsers. So if you look at it, the browsers are multifaceted. So they are used to do other things. Obviously they have to be large, they have to be complex because they cater to different needs, different requirements of people. So what's happening is that there are too many parts that interact. So they are not independent of each other. So when I do HTML5, I don't just do HTML5. I do need to use CSS or I use those things to solve some problem. Therefore I have to combine many of these things together. That's what makes browser complex. And similarly, the basic theme today is content basically. How do we organize it? How does CSS help us to that? Although the original title was saying, CSS3 Animation Design and Implementation actually changed the title. Because I just said, okay, how do we render CSS? How do browsers do that? And what can we do with CSS? So the content, essentially the content has to be interactive, portable, shared and actually present. Write all these mobile phones and all the new requirements. So what happens is we need to have a mechanism where we can do these things from within the browser. Can JavaScript alone do it? Or should JavaScript alone be doing it? Or only JavaScript be doing it? Or do we have other ways of doing these things? So if you look at the past models of how browsers would render a page, so it's an interesting thing. You put up HTTP, HTTP request, you get back HTML, that's a basic model that all of us have. And it gets rendered. And you have movies, you have video, audio, images, and then it's shown. So this was the old model of how web pages would be. So you essentially go to the red box, make a network request, you get a stream, and then you look at the stream passing it, which is HTML. And for all those, I suppose many of you are from computer science and people who have at least some introduction to how compilers are a service worker. So essentially a DOM tree is constructed, and it goes on because as a part of the construction of the DOM tree, when a web page arrives at the browser, and the browser starts looking at it, and it starts passing JavaScript, HTML in it, as a process of passing it, there may be changes to the DOM tree with something. So this is a highly interesting thing. It's like that process may never stop, but most of the pages are not written that way, so you'll never see things happening that way. So this is an iterative process that goes on and on. Then there's a fixed point, and then you end up with a DOM. It will model that way. Let me just switch. So as I said, you know, excuse me, I'm sorry, if there's a challenge here on the nice switch. So I just wanted to show you an example here. Yeah, let's take a look at Spassman Manz's web page, right? There's more to the point as to what I'm talking about today. So this is a full page thing which shows a lot of side parts and content and the search and things like that. What we do is we start resizing the window. As we start resizing the window, you can see the red content flows. So when I resize the window, I'm not really making an input call. I want you to understand this point. So we are not making a new request to the server to get the page, get the content. The content is the same that is shown on the browser's window. But as we shrink or as we resize the window, you can see that some content disappears and some content, some items, some elements on the web page are re-flow, they are replaced, they are moved across. This is pretty interesting. Not all web pages, not all web pages behave this way. Look at the search bar. It just changes its appearance, changes its place, and some ads go and things like that. Look at the web page of a list account. It's the same as it was mentioned. So if you look at it, nothing much happens. So the content remains the same. And then there are scroll bars. So it shows that the content is full, but you can scroll across. But if you look at the smashing man's content, the way it works is that you don't get a horizontal scroll bar. Interesting. The same page shown on a Firefox browser, then there is a nice little thing here which we can go to the developer, go to the developer control and see the responsive design. So this gives us a way to look at all the pages depending on the resolution. I change the resolution. How does my web page look like? Look at the way smashing man's page resizes neatly. This might be on a mobile. The screen looks more like a small hand-hand device thing. Just as I showed you, it may manually be resizing the window. And I did this. Similarly, you can check maybe the landscape more or more. You can use different sites. And you can see how this page really reflows. This is the CSS string. What's happening inside this was not JavaScript. It wasn't HTML. It was CSS. CSS stands for Cascading Steinsheets. They're called Steinsheets because you're going to study your content using these specifications. So how does a CSS declaration look like? It's not like a script. It's not like a bunch of statements that are executed one after another. There is a model. There is a different way to handle CSS. So it's my intention today to show you how CSS connects with JavaScript or HTML and then how this rendering happens within the browser. Given the time. I'll do my best to do that. So this is one part of it. There are other parts to it. Let's take a few examples. So as I take my... These are simple examples of CSS animations. CSS transitions or transformations. You can say this is fairly, very simple in CSS to do. You don't need to be a programmer to do all these things. But you need it pretty fast. So I want to draw your attention to that. They're not slow. Pretty fast. Why is it so? So there are various examples. You can go to the browser. You can go to the favorite search engine. And then you can see various examples. So this doesn't involve JavaScript at all. All this involves CSS. So when people look at a web page, these days it's very difficult to see. Whether it uses jQuery animations, jQuery based transitions, or it's using just CSS transitions and transformations. So the basic idea is that if you use modern browsers like Chrome, recent builds, or Firefox, recent builds, you have a lot of these things. It means a value for you. You can always render your content in a different way on the recent browsers and in a different way on the old browsers. Okay, let's go back over and just give a few slides right now. It doesn't make much sense after those examples. So some of the things that are of interest to us when we start looking at how browsers do it, is that most of these browsers, they all use the web code engine, the one that I have contributed. So this web code engine is the one that takes care of CSS rendering. It takes care of JavaScript, it takes care of HTML passing, and it also takes care of CSS. So in order to play around with the CSS, if I have to show you some examples, there are a few things that you should know. With JavaScript, it's a programming language, you should know how the control flow works, how you organize your programs, as soon as we go saying closures and other things. But with CSS, the model is fairly simple. It's kind of aspectually a thing. You need to think in a different way. You say, okay, this is my content, and I want to render it in a particular way, depending on the media size or the media type. So as I showed you a few minutes ago, if the screen size is 320, 480, then it looks different. If it is a larger screen, it looks different. So essentially what we need to think about is, what's my media size, what's the browser window size, and what is it that I want to show, and then how do I show it? Now we need to be able to specify this out of HTML, right? We should not be putting this, the styling thing within the HTML. If that's the case, then we would be breaking the modularity. So the whole idea behind this design is that you keep your content in one place, you keep your style sheets in another place, and then have a mechanism to combine both. That's what browsers do. So we need to be able to specify that this content should be styled in this way, right? So that length should be minimal, of course. You should specify that somewhere sometime, but then the way we specify it should be so minimal that the browser is able to connect and then put the styles together. So there are only a few things that we must learn when we go to CSS. One is called the box model. That is of interest to us today. And the CR, I'll show you a couple of examples. I hope I'll be able to do that as I talk. Transparency and some of the animations that we saw, right? So let's go back and see an example. So I have something ready for you. So I use Chrome as well as Mozilla Firefox also. So I don't want to switch between those two because it confused me as I present. So let's look at this simple HTML. So there are two things as you see there. There are two boxes which one appears on the other. So the basic idea is that, so I bring up this. You have a console or I can, this you can bring up. I hope you know. Hope you just know this. So you go for all those people who do not know it. You go here and there is two. Okay, tools. And then say anyone of these, right? So I just, I just say code shift j. So I use the shortcut, right? So it comes up there. So if you see it here, it's a very simple thing to think. As soon as it was saying, you click on your right, click on your element and say inspect element. It shows you, right? There's a great trace to start looking at your pages or start looking at your CSS or the content itself. So you can go there and say that, okay. There is a style here. Right now what I have done is I have mixed this with HTML itself so that it becomes easier to play around. Okay, so there are two boxes here. This is the first box and this is the second box. Let me click on this and say inspect element, right? So I see some properties here. Completed style and the element style. So this is what we are talking about. So we set styles on the elements. Let's just go, what's good about, what's great about these browsers these days is that they allow us to interactively modify some of these styles and we can immediately see how that changed in style impacts the rendering, right? So that we will be able to keep again quickly. So for example, this is the deal I need. I hope you know Dibs and the basic elements, right? So the box model which I was talking about. Whenever we use a Dib in a marker, it says that a new box should appear. So in CSS there is only one thing. There are only two things. One is a box and the content within it, inline content. So when we say Dib, we create a basic block, basic box in which the content flows. So go here and then say, for example, let's play it out with the zero. So we might say something like zero. So suddenly it disappears. Essentially it's the order for almost people who know a little bit of OpenGL and things like that. Z is the depth part of it. So how far is it from the I? When you look at a pinhole camera. So essentially it means larger number will mean that if they are closer to you, positive numbers, negative numbers will be, or smaller numbers will be, it's away from you. So the Z index of this is 2, right? I set it to zero. So it went back. You can go back and set it to three. It comes forward. Now why am I having on this? The idea is now you set a style on the element on the div box, which may be showing, right now it's just showing the text that it's a div box and then that it's background color is red. But it could be any content. So by controlling the Z order, it either goes back or comes above the other content. If you look at it from the browser's perspective, so for us it was just going and changing some styles. The content remains the same. Please mind. The box is still there. The HTML is the same. Only the style is changed. So when the browser renders this, some content doesn't appear and some permanent is here, including, right? So the browser's, the renderer's responsibility now is to see the Z order of most of these elements sorted in a particular way and draw them from back to the front. So that when you draw it, some of those elements do not appear. So if you think of it, in terms of the implementation detail within the browser, the moment you change a style, the whole thing has to be true. For example, we may go and say for this div block, right? For this div block, I may say there is an option here called display, right? The moment I say display none, it disappears. So this is a hint to what Smashing Manstein's web page was doing, right? This should give you some clues of how that page was reacting. So all that I did was I set display none. Another option is to say display block. It comes back, right? Can you see that? So the HTML content doesn't change. The styles change. So what Smashing Manstein was doing there as I was reformatting it was that it was detecting, the CSS was detecting the size of the window changing. There is an option in CSS to vary the media type, to vary the size of the window and then accordingly the styles would change. So obviously the browser would reflow the whole content. So this is, there is no JavaScript involved. Please mind me. There is no programming involved. So this is, I would be entirely wrong if I say there is no programming here. You can view this as programming, right? But this is more declarative in nature. It's like you send the styles by setting property values. So you look at each element as carrying around a bunch of properties and values. So you go and change the values you can do that. Good thing about it is that you can change the styles as a runtime. So you can use JavaScript to change the style as we manually did it here in the console, debugging console. JavaScript also can select the elements and then change the style. So when you combine these two things, you get a very powerful way to render your web pages, your content. Okay. So there is this small thing, right? I just want to show you this. So this is a basic animation. Again, these examples are very real, but then it shows linear. So this is kind of linear gradient that CSS 3 allows us. So you can see that the second part, the fit circle, as it moves across, the size increases, and it requires a red color. So slowly in a linear fashion. And this text also, if you see it, it moves. So how do I, how do we do that? There is no JavaScript. If you look at the HTML, it's just this, right? There are only styles that are getting changed. So here, for example, there is one of the options, right? Webkit animations. Actually here, animation is the standard property name, W3C standard, but on many browsers it's still experimental in nature. Therefore you will have some of those prefixes with Webkit or Mozilla also, right? But then it's a standard, right? So you can use some of these things in your browser, modern browsers. So these are the few examples that show us how CSS 3 five minutes, okay? Just a minute. So this is where we can start. So let's go. So how do browsers do it? We just saw how CSS does it. What is CSS and how many CSS you can do cool animations without writing JavaScript, right? So you don't need to do a lot of things. If you search for many cool animations using CSS, you will get hundreds of examples. So you please, if you are interested, you can take a look at it. So how do browsers do it? As we were saying, as HTML comes to the browser, it don't think it's created. So the HTML content, which is textual in nature gets converted into an internal representation tree. And then what CSS does is to create another tree that says that this is the content, but these are the styles associated with it, right? As we saw with Smashing Magazine's page, as you resize the window, the content remains the same, but the styles change. Therefore, the way they are rendered changes, which means that this DOM tree should never change, right? Only the render object tree should change. So this is how browsers do it. DOM tree never changes. There's always a shadow tree, even when we use some of those things. So this is for efficiency, of course. And render object tree is the one which is actually rendered. But then, as we saw with Zed in us, you can check the order of these layers, right? You can bring it back and forth. So we need to also have what are called as layers. So it's a tree, again. So within a raw, there can be a render tree with different Zed orders. So the browser has to, at least, these are the three minimal data structures that the browser has to maintain. So just to quickly rush through some of these things. So if you get this HTML, you get something like this, right? So this would be the DOM tree that you see. So this would be the render tree that you get, as a result. For example, this is the reference to a web code, right? For quite some time, I've been spending some time looking at the source code, of course, source code. And this is what we would get. This is the DOM tree, this is the render tree. So these are complex data structures in the sense they take a lot of the hub memory, obviously. And this is what gets rendered, right? And then what happens is the GPU comes in. For example, iPhone, right? Or all Macs, they come with GPUs. So web code will accelerate your CSS if you have the GPU. My iPhone or iPad CSS is always accelerated using the GPU. So it goes from the OpenGL bar. So these layers, some of these layers that are accelerated in web code today are the Canvas element, HTML, Canvas element. The preload layer, the WebGL, or BSL. And then these are some of the layers, depending on your z-order. So compositing and rendering happens on the GPU, which is much faster. So these layers, what essentially happens is each one of these layers, for example, when you say this tube block has a z-order of 3, it goes into a bitmap of its own. Then you say this tube has a bitmap, a z-order of 2, it goes into a bitmap of its own. Then these two bitmaps will be deposited. They have to be blended together. That blending operation, if you think of, you cannot display the number of pixels. So these two layers will have those many number of pixels which have to be quickly composited, which have to be blended. So if you do not have a GPU, the software is going to be slow. That's one of the reasons why with one of those examples I was showing, the fit circles moving, growing, and CSS3 coming to the front, it was laggy if you noticed. That's because I don't have a GPU. It's not a GPU. So software never would make it slow. These are the details. So should we go for JS, JavaScript, or CSS? When it comes to styling some of these elements or showing the cool animations or some of the menus that you can create with examples that are, there are tons of examples available. So it depends. If you have a GPU available, if you have a GPU, if you're targeting a phone, like a iPhone, in which you know that there is a GPU, use CSS. JavaScript will run slower than CSS. JavaScript needs to be interpreted. No matter how fast the engine is, it still is a virtual machine. But with CSS, that compositing, blending, and drawing happens on the GPU which is a separate processor altogether. So it's going to be faster. So use CSS, depending on whether CSS is accelerated. So it's very difficult to say it on Android because as we all know, there are tons of challenges with Android devices. You never know whether it is accelerated or not. So probably dynamically, an Android application has to detect whether there is a GPU and then settings when you are fix like that so that it's accelerated. The good thing about it is, CSS is declarative. At the same time, it's not easy. You don't get misled thinking that it's easy. It's difficult in the sense that you need to think of a lot of things. And CSS cascades. That's one good thing about it compared to JavaScript. Cascading in a sense, you can import all that one script and the newer script would, a newer style sheet would overwrite the earlier one. So you can have newer styles coming in. So it cascades. That's it. Thanks. Right? So I have any questions now. You are after the session, right? So if you can ask me. Yes, thanks. I don't, I don't, I'm not too much into CSS. But when you said it's machine magazine that only CSS should be mentioned, right? There is no JavaScript involved. But I'm sure CSS can't change its value itself, like display none or with high-end. Oh yeah, that's a good question. So, sorry, sorry to... Is that the question? Or you have something more? Is there a question behind a question or? That's the question. It means... Okay. So how does it work? Okay. So, what happens is that I can quickly show you there is a media declaration in CSS. Right? You can say when the media width is so much, width of the media is so much, you pick up this type. I showed you one style where I said display none. Okay. Do I have time right now or should I do it? Good. Good? Okay. So, let's go to the science magazine. Right? Let's go and I need to pull up the media. Yeah. Not in one minute. Control. I mean Firefox. Give me a minute. So we used to pull up. So, if you go to Resources, Strikesheets, main CSS. There is one. Right? So, let's search for media. Yeah. Can you see that? Oh, sorry. Can you see that? Can you see it now? Yeah. Can you see this now? Can you read it? Not even offline. I can show you that. So, it says if media is clean and the width is minimum. Minimum width is 500 pixels. Can you read? Can you see? Right? Then, some styles change for the list elements, for the unordered list. Right? So, you can just copy this, paste it onto a better editor, where you can reformat it. Right? You can see that there are many media. See, when it is 610 pixels, it changes its size. When the minimum width is 500 pixels, it sets up a different style. Right? You can look at the CSS declarations. So, the way the browser is doing this, as the browser's window strings are, you know, re-signers, it picks up the right CSS for that size and applies those things. It happens behind the scenes. So, there is no JavaScript involved there. This is style. In other words, when the page is designed, right? When the page is designed, the designer would say that, okay, these are the media and these are the widths, minimum widths I need to have for a meaningful rendering of my page. So, those are set style. You can do it dynamically using JavaScript. It's not required, right? If you design it up front, then you can go this way. I will answer your question. Is it compatible with IEA? IEA? I am not an expert on browser politics. I know. So, I'm not a... So, it's not of IEA. I think there are many responses into IE10, but there are scripts, there are ships. There are ships that you can just take a script and put it in your page and it directs your page, supports it or not, and it put a little JavaScript that will read it from your CSS and put them that way automatically. You won't have to do anything separate. If you are seriously doing... Try using Modernizer, right? That's a neat little library that detects CSS support and HTML file support and gives many features for the file. Modernizer is a very popular thing. So, it was a Polish Google guide behind Modernizer, so you can use that. Sir, can you use some algorithm in that time? Yes. Yeah. So, are you using any framework, CSS framework? No, no. So, everything that I showed you was plain, simple CSS. So, you are using the devkit? Yeah. So, I use... See, as I said, these are already W3C standards, but then the Wave, Mozilla, Firefox and devkit implemented is experimentally in nature. So, you have to pre-fix that. But then you can also use the shorthand. Sorry? Yeah, there is flash-o, minus-o. Okay. Anything else? Okay, thank you very much. I am here anyway. I am here today. See you. Thanks.