‫Hey, there.
‫Welcome back.
‫Showing the site now in this lecture, we are going to discuss about browser compatibility or the other
‫item that I want to utilize is rendered graphics code.
‫Now what it is and why it is important.
‫One thing I hope by now you understood is that every browser lord our CSV file to display the design
‫display the presentation that we have different properties, different value.
‫Don't worry, you don't need to understand this here.
‫You just need to understand whenever we visit any type of website.
‫There is some type of success that load up this design now with different browser.
‫There are different CCIs properties and they're setting.
‫For example, maybe I have some setting here that might not work well.
‫Maybe if I open Internet Explorer, or maybe.
‫Firefox, so there are certain properties that might work on Firefox, but are not going to work with
‫Chrome as well as Internet Explorer, or there are certain properties that might work with Chrome but
‫are not compatible with our Firefox or Internet Explorer.
‫That's where this whole topic comes into picture, which is browser compatibility.
‫Now, why this topic is important because we are not able to view our design like this is the same base
‫that we are currently loading and had on this page.
‫You can see this is not working on our chrome because there are certain decks, but it is not visible.
‫But if I jump on to my Firefox, this is walking.
‫Our text is visible.
‫So this is the right example in which I want to discuss why certain properties work here and why not?
‫So there are three sites that I'm going to recommend.
‫The first one is can I use dot com?
‫The second one is about a guide regarding vendor prefix on EMD in the box, which is by Mozilla.
‫And the third one is W3C school.
‫So we are going to discuss about all three of them now.
‫No need to remember.
‫Again, I'm just repeating things.
‫You don't need to remember things every time.
‫There are chances that once it is not walking, you can search things.
‫Everything is available on Google, so you can solve stuff on Google.
‫Now, I had one important point that why this issue happens because of different portions of Chrome,
‫different origins of Firefox.
‫So every time there is something new, it's yes, maybe only the newer versions of Chrome are compatible.
‫Or maybe there are certain issues with that property for Firefox or any other reason.
‫So what we need to do is we need to utilize our demographics.
‫If we jump onto this vendor prefix.
‫You will see these type of prefix like WebKit, like Maus, like opera or maybe Microsoft Edge.
‫Now what are these and how we are going to utilize them?
‫So WebKit is the most important one which help us to cover our Chrome browser.
‫Our Safari browser, the newer versions of opera and even the new oceans of Microsoft Edge.
‫Everything is covered with this WebKit prefix.
‫Now there are also origins of obeida or low origins of Internet Explorer that require this MSS, which
‫is Microsoft and this is obeida.
‫So this is prefix and how we are going to utilize it.
‫For example, if we are using this transition property and if this is not working with maybe safari,
‫then we need to utilize this web gate transition.
‫Or maybe this is not working with Mozilla.
‫We need to utilize this Mozilla transition.
‫Now there are tons of property, dozens of browser.
‫How to keep track of it.
‫So whenever you have a doubt or whenever you see that, OK, this is working here, this is not working
‫here.
‫What I need to do.
‫All you have to do is jump on to gamma use dot com or W3 school and directly search about that property.
‫One example here if I directly search about my background clip, this is a property that I'm currently
‫using my.
‫If I jump on to my thesis, this is the property that I'm currently utilizing, and if I jump here on
‫my background clip, you will get information about different browser.
‫OK, now how to utilize this?
‫Just a second, but let me jump on to my code.
‫So what I'm doing is I'm having certain text here, and what I'm doing is I'm changing their phone face,
‫OK?
‫I'm adding this background color and background gradient.
‫OK, I'm adding this background clip and transparent.
‫Now what this background clip is doing right now.
‫You don't need to understand this.
‫We have separate lecture for background clips, but what this is doing is this is trimming our background
‫in the form of Art X.
‫So whatever text we have, our background is trim according to that text, and then we have cleared
‫our color or our text.
‫That means we have created our text as transparent so we can see the background.
‫Now here, whatever visible to you is our background because our text is transparent.
‫Now, this property is working fine without Firefox.
‫That is this Mozilla browser.
‫But I opened this exact same property here on my groom.
‫You can see this background clip is not working.
‫The text is transparent.
‫Everything is working.
‫We have this background gradient, but this whole background clip is not working.
‫And because of that, we we have this entire background visible.
‫Now here, if I jump on to Ghana, you will start.
‫Com search about my background clip.
‫You will get tons of information.
‫The first thing is radio one.
‫That means it is not going to work with Internet Explorer.
‫That is the older versions of Internet Explorer.
‫It is not going to work.
‫We cannot do anything.
‫The divergence, which was released during 2013, it's not working.
‫OK, then we have edge.
‫We can utilize this with our edge.
‫That means this new Internet Explorer, which is Microsoft Edge, we can use this with the help of the
‫prefix in the latest version and in the older version using this MSN prefix.
‫OK, then without Firefox, it is supported by default in the latest version.
‫You don't need to utilize any and you can see it is by default blocking.
‫OK.
‫But we cannot utilize them in the older version that was released during 2006.
‫Of course, that means by default, it is supported with Firefox.
‫Great.
‫Then we have this whole thing about Chrome, so we can utilize this with Chrome.
‫You can see this yellow dot with the help of this web gate.
‫You can see this have good graphics so supported with graphics, which is WebKit.
‫Now remember, the majority of user in this world are either utilizing Chrome, Firefox or Edge.
‫All the other browsers are maybe 0.01 percent.
‫So if I jump on to this edge and if I see maximum users or get three percent down or dissuasion and
‫that is global, if I jump on to Chrome, you will see the common margin is around 20 percent.
‫And even for Android, if I jump on to Chrome, for Android and if I jump over here, 40 percent, you'll
‫see.
‫So either they are using Chrome, Firefox or Edge now for Safari.
‫Also, we need to utilize this work.
‫And for Chrome, the market for the latest version of Edge, we need to use WebKit and it is supported
‫by default with our Firefox.
‫I hope you got the idea how to utilize this background clip.
‫All I have to do is just copy this one.
‫And here I just need to add a prefix, which is very good, save this one.
‫Now, if I jump on to my Firefox, it is working by default itself.
‫Jump onto my Chrome.
‫It is working now and jump onto my Microsoft Edge.
‫This is working now.
‫So I hope you got the idea how this is going to work with all the different browsers and what we have
‫to do is just utilize either can I use dot com?
‫And then I need to add prefix.
‫Remember, I need to add odd properties because with this, we are going to support a Firefox browser.
‫And with this, we are going to support our other browsers like Chrome or Edge.
‫Here you can also see Chrome and Safari three OneNote, and the recent rise in Firefox will also support
‫this web page.
‫So don't worry, I hope you got the idea how we are going to utilize this window prefix, which is are
‫mainly are web get.
‫Actually, all the others will be removed sooner or later.
‫So that's all for this important lecture and which should be understood about different points of browser.
‫Now head these are the browser version like Chrome is coming up with 92 and 94 version, and at this
‫point of time, that uses is zero point zero five percent.
‫But if I need to realize this property on the upcoming version as well, I need to utilize this would
‫get.
‫OK, I hope you got the idea.
‫Now this was one thing about Virgin Prefix Gordon, the other important thing is whenever we utilize
‫these type of property, for example, this linear gradient, there are chances that this color will
‫fail.
‫Now this background will fail.
‫And because of this same reason, we had a fallback option, which is our color.
‫So if by any chance this is not walking, this background amid this background is not working.
‫Our browser is going to utilize this color.
‫So if I jump here?
‫You can see now we are utilizing this color, so for now, let me remove this property also and get
‫back to my room.
‫You can see this color is walking because of our fallback option.
‫Remember, this is important at several position during our phone family selfie or utilize our fallback
‫option.
‫So by John said This bill is not supported by browsers.
‫It's not working with our browser.
‫We can fall back to our default or the other one are that option that we have provided.
‫So make sure to utilize this tool.
‫And also, you can check all the different options here with W3 school and you can search about browser
‫support reference.
‫And if you scroll down here, you can see that, OK, this is not working with Safari and you need to
‫utilize this, or there will be certain properties that might face issue with other browsers, like
‫maybe this font variant on something like this.
‫So there are certain things that you will learn as you grow.
‫Maybe this text combine upgrade some type of property, which is pretty rad, actually.
‫You are not going to utilize them on day to day basis, but this is a thing that I want to discuss.
‫So that's all for this lecture, I hope you got the understanding about how brutalized this render graphics
‫code and the other thing.
‫OK.
‫All this is done.
‫The other thing is whenever you are going to learn about science on, maybe whenever you are going to
‫learn about caspary processor, which is pretty advanced concept, you don't have to write and actually
‫you don't have to write them.
‫This will be automated, so you don't need to write them for individual item.
‫What you are going to do is you are going to write a file, something like this and then automatically
‫it will add all types of requirements like web could not mess on Maus, whatever is required.
‫So we will learn about this during the final section off our course, which is pretty advanced concept
‫actually source.
‫And we are going to discuss not other things, but this is one important thing that SAS do automatically,
‫which does include all these type of references so you don't have to do and add them manually.
‫It will be included automatically by SAS.
‫Thank you for following and I see you guys in the next one.