1 00:00:00,510 --> 00:00:01,140 ‫Hey, there. 2 00:00:01,260 --> 00:00:02,010 ‫Welcome back. 3 00:00:02,060 --> 00:00:08,920 ‫Showing the site now in this lecture, we are going to discuss about browser compatibility or the other 4 00:00:08,920 --> 00:00:12,330 ‫item that I want to utilize is rendered graphics code. 5 00:00:13,110 --> 00:00:15,150 ‫Now what it is and why it is important. 6 00:00:15,660 --> 00:00:23,130 ‫One thing I hope by now you understood is that every browser lord our CSV file to display the design 7 00:00:23,160 --> 00:00:26,850 ‫display the presentation that we have different properties, different value. 8 00:00:27,450 --> 00:00:29,970 ‫Don't worry, you don't need to understand this here. 9 00:00:29,970 --> 00:00:33,150 ‫You just need to understand whenever we visit any type of website. 10 00:00:33,420 --> 00:00:39,150 ‫There is some type of success that load up this design now with different browser. 11 00:00:39,270 --> 00:00:42,420 ‫There are different CCIs properties and they're setting. 12 00:00:42,630 --> 00:00:47,890 ‫For example, maybe I have some setting here that might not work well. 13 00:00:48,120 --> 00:00:51,690 ‫Maybe if I open Internet Explorer, or maybe. 14 00:00:53,010 --> 00:00:59,820 ‫Firefox, so there are certain properties that might work on Firefox, but are not going to work with 15 00:00:59,820 --> 00:01:05,580 ‫Chrome as well as Internet Explorer, or there are certain properties that might work with Chrome but 16 00:01:05,580 --> 00:01:09,480 ‫are not compatible with our Firefox or Internet Explorer. 17 00:01:09,960 --> 00:01:15,300 ‫That's where this whole topic comes into picture, which is browser compatibility. 18 00:01:16,390 --> 00:01:22,570 ‫Now, why this topic is important because we are not able to view our design like this is the same base 19 00:01:22,570 --> 00:01:25,400 ‫that we are currently loading and had on this page. 20 00:01:25,420 --> 00:01:31,180 ‫You can see this is not working on our chrome because there are certain decks, but it is not visible. 21 00:01:31,630 --> 00:01:34,600 ‫But if I jump on to my Firefox, this is walking. 22 00:01:34,600 --> 00:01:36,400 ‫Our text is visible. 23 00:01:38,120 --> 00:01:43,520 ‫So this is the right example in which I want to discuss why certain properties work here and why not? 24 00:01:44,070 --> 00:01:46,250 ‫So there are three sites that I'm going to recommend. 25 00:01:46,490 --> 00:01:48,620 ‫The first one is can I use dot com? 26 00:01:48,980 --> 00:01:55,130 ‫The second one is about a guide regarding vendor prefix on EMD in the box, which is by Mozilla. 27 00:01:55,820 --> 00:01:57,620 ‫And the third one is W3C school. 28 00:01:57,950 --> 00:02:01,350 ‫So we are going to discuss about all three of them now. 29 00:02:01,350 --> 00:02:02,480 ‫No need to remember. 30 00:02:02,480 --> 00:02:03,950 ‫Again, I'm just repeating things. 31 00:02:04,190 --> 00:02:06,860 ‫You don't need to remember things every time. 32 00:02:07,490 --> 00:02:11,130 ‫There are chances that once it is not walking, you can search things. 33 00:02:11,150 --> 00:02:15,140 ‫Everything is available on Google, so you can solve stuff on Google. 34 00:02:15,740 --> 00:02:21,770 ‫Now, I had one important point that why this issue happens because of different portions of Chrome, 35 00:02:21,770 --> 00:02:23,720 ‫different origins of Firefox. 36 00:02:24,020 --> 00:02:30,350 ‫So every time there is something new, it's yes, maybe only the newer versions of Chrome are compatible. 37 00:02:30,650 --> 00:02:36,170 ‫Or maybe there are certain issues with that property for Firefox or any other reason. 38 00:02:36,830 --> 00:02:40,880 ‫So what we need to do is we need to utilize our demographics. 39 00:02:41,000 --> 00:02:43,160 ‫If we jump onto this vendor prefix. 40 00:02:43,640 --> 00:02:51,350 ‫You will see these type of prefix like WebKit, like Maus, like opera or maybe Microsoft Edge. 41 00:02:51,980 --> 00:02:54,830 ‫Now what are these and how we are going to utilize them? 42 00:02:55,490 --> 00:03:00,950 ‫So WebKit is the most important one which help us to cover our Chrome browser. 43 00:03:01,190 --> 00:03:08,030 ‫Our Safari browser, the newer versions of opera and even the new oceans of Microsoft Edge. 44 00:03:08,480 --> 00:03:12,080 ‫Everything is covered with this WebKit prefix. 45 00:03:12,620 --> 00:03:20,030 ‫Now there are also origins of obeida or low origins of Internet Explorer that require this MSS, which 46 00:03:20,030 --> 00:03:21,860 ‫is Microsoft and this is obeida. 47 00:03:22,550 --> 00:03:25,190 ‫So this is prefix and how we are going to utilize it. 48 00:03:25,400 --> 00:03:33,560 ‫For example, if we are using this transition property and if this is not working with maybe safari, 49 00:03:33,560 --> 00:03:36,650 ‫then we need to utilize this web gate transition. 50 00:03:37,010 --> 00:03:39,620 ‫Or maybe this is not working with Mozilla. 51 00:03:39,860 --> 00:03:42,440 ‫We need to utilize this Mozilla transition. 52 00:03:43,370 --> 00:03:45,990 ‫Now there are tons of property, dozens of browser. 53 00:03:46,010 --> 00:03:47,510 ‫How to keep track of it. 54 00:03:47,870 --> 00:03:52,610 ‫So whenever you have a doubt or whenever you see that, OK, this is working here, this is not working 55 00:03:52,610 --> 00:03:52,940 ‫here. 56 00:03:53,060 --> 00:03:53,990 ‫What I need to do. 57 00:03:54,410 --> 00:04:00,860 ‫All you have to do is jump on to gamma use dot com or W3 school and directly search about that property. 58 00:04:01,160 --> 00:04:09,740 ‫One example here if I directly search about my background clip, this is a property that I'm currently 59 00:04:09,740 --> 00:04:11,520 ‫using my. 60 00:04:11,520 --> 00:04:17,870 ‫If I jump on to my thesis, this is the property that I'm currently utilizing, and if I jump here on 61 00:04:17,870 --> 00:04:21,830 ‫my background clip, you will get information about different browser. 62 00:04:22,040 --> 00:04:24,380 ‫OK, now how to utilize this? 63 00:04:24,410 --> 00:04:26,840 ‫Just a second, but let me jump on to my code. 64 00:04:27,140 --> 00:04:35,020 ‫So what I'm doing is I'm having certain text here, and what I'm doing is I'm changing their phone face, 65 00:04:35,030 --> 00:04:35,540 ‫OK? 66 00:04:35,930 --> 00:04:39,770 ‫I'm adding this background color and background gradient. 67 00:04:39,980 --> 00:04:44,330 ‫OK, I'm adding this background clip and transparent. 68 00:04:44,360 --> 00:04:47,000 ‫Now what this background clip is doing right now. 69 00:04:47,000 --> 00:04:48,200 ‫You don't need to understand this. 70 00:04:48,200 --> 00:04:54,590 ‫We have separate lecture for background clips, but what this is doing is this is trimming our background 71 00:04:54,590 --> 00:04:56,150 ‫in the form of Art X. 72 00:04:56,330 --> 00:05:03,350 ‫So whatever text we have, our background is trim according to that text, and then we have cleared 73 00:05:03,350 --> 00:05:04,880 ‫our color or our text. 74 00:05:04,880 --> 00:05:09,800 ‫That means we have created our text as transparent so we can see the background. 75 00:05:10,130 --> 00:05:15,500 ‫Now here, whatever visible to you is our background because our text is transparent. 76 00:05:16,650 --> 00:05:20,350 ‫Now, this property is working fine without Firefox. 77 00:05:20,400 --> 00:05:22,140 ‫That is this Mozilla browser. 78 00:05:23,140 --> 00:05:26,890 ‫But I opened this exact same property here on my groom. 79 00:05:27,610 --> 00:05:30,190 ‫You can see this background clip is not working. 80 00:05:30,490 --> 00:05:31,950 ‫The text is transparent. 81 00:05:31,990 --> 00:05:33,130 ‫Everything is working. 82 00:05:33,310 --> 00:05:38,020 ‫We have this background gradient, but this whole background clip is not working. 83 00:05:38,020 --> 00:05:41,620 ‫And because of that, we we have this entire background visible. 84 00:05:42,520 --> 00:05:44,770 ‫Now here, if I jump on to Ghana, you will start. 85 00:05:44,770 --> 00:05:47,140 ‫Com search about my background clip. 86 00:05:47,770 --> 00:05:49,720 ‫You will get tons of information. 87 00:05:50,380 --> 00:05:51,720 ‫The first thing is radio one. 88 00:05:51,730 --> 00:05:55,660 ‫That means it is not going to work with Internet Explorer. 89 00:05:55,900 --> 00:05:58,540 ‫That is the older versions of Internet Explorer. 90 00:05:58,570 --> 00:05:59,710 ‫It is not going to work. 91 00:05:59,980 --> 00:06:01,030 ‫We cannot do anything. 92 00:06:02,020 --> 00:06:05,980 ‫The divergence, which was released during 2013, it's not working. 93 00:06:06,430 --> 00:06:07,690 ‫OK, then we have edge. 94 00:06:08,760 --> 00:06:11,080 ‫We can utilize this with our edge. 95 00:06:11,100 --> 00:06:18,390 ‫That means this new Internet Explorer, which is Microsoft Edge, we can use this with the help of the 96 00:06:18,690 --> 00:06:24,000 ‫prefix in the latest version and in the older version using this MSN prefix. 97 00:06:24,390 --> 00:06:29,970 ‫OK, then without Firefox, it is supported by default in the latest version. 98 00:06:30,390 --> 00:06:34,260 ‫You don't need to utilize any and you can see it is by default blocking. 99 00:06:34,620 --> 00:06:35,070 ‫OK. 100 00:06:35,520 --> 00:06:40,410 ‫But we cannot utilize them in the older version that was released during 2006. 101 00:06:40,860 --> 00:06:44,210 ‫Of course, that means by default, it is supported with Firefox. 102 00:06:44,250 --> 00:06:44,670 ‫Great. 103 00:06:45,270 --> 00:06:50,110 ‫Then we have this whole thing about Chrome, so we can utilize this with Chrome. 104 00:06:50,190 --> 00:06:54,600 ‫You can see this yellow dot with the help of this web gate. 105 00:06:54,720 --> 00:06:59,870 ‫You can see this have good graphics so supported with graphics, which is WebKit. 106 00:07:00,540 --> 00:07:06,810 ‫Now remember, the majority of user in this world are either utilizing Chrome, Firefox or Edge. 107 00:07:07,290 --> 00:07:11,040 ‫All the other browsers are maybe 0.01 percent. 108 00:07:11,580 --> 00:07:18,960 ‫So if I jump on to this edge and if I see maximum users or get three percent down or dissuasion and 109 00:07:18,960 --> 00:07:25,290 ‫that is global, if I jump on to Chrome, you will see the common margin is around 20 percent. 110 00:07:25,590 --> 00:07:31,950 ‫And even for Android, if I jump on to Chrome, for Android and if I jump over here, 40 percent, you'll 111 00:07:31,950 --> 00:07:32,230 ‫see. 112 00:07:32,730 --> 00:07:36,600 ‫So either they are using Chrome, Firefox or Edge now for Safari. 113 00:07:36,600 --> 00:07:38,610 ‫Also, we need to utilize this work. 114 00:07:38,730 --> 00:07:45,360 ‫And for Chrome, the market for the latest version of Edge, we need to use WebKit and it is supported 115 00:07:45,360 --> 00:07:47,040 ‫by default with our Firefox. 116 00:07:47,250 --> 00:07:51,340 ‫I hope you got the idea how to utilize this background clip. 117 00:07:51,360 --> 00:07:53,490 ‫All I have to do is just copy this one. 118 00:07:54,440 --> 00:08:01,670 ‫And here I just need to add a prefix, which is very good, save this one. 119 00:08:02,340 --> 00:08:06,050 ‫Now, if I jump on to my Firefox, it is working by default itself. 120 00:08:06,440 --> 00:08:07,670 ‫Jump onto my Chrome. 121 00:08:07,910 --> 00:08:11,600 ‫It is working now and jump onto my Microsoft Edge. 122 00:08:12,110 --> 00:08:13,190 ‫This is working now. 123 00:08:14,320 --> 00:08:20,770 ‫So I hope you got the idea how this is going to work with all the different browsers and what we have 124 00:08:20,770 --> 00:08:23,950 ‫to do is just utilize either can I use dot com? 125 00:08:24,310 --> 00:08:26,710 ‫And then I need to add prefix. 126 00:08:27,550 --> 00:08:36,460 ‫Remember, I need to add odd properties because with this, we are going to support a Firefox browser. 127 00:08:36,760 --> 00:08:41,800 ‫And with this, we are going to support our other browsers like Chrome or Edge. 128 00:08:42,670 --> 00:08:49,210 ‫Here you can also see Chrome and Safari three OneNote, and the recent rise in Firefox will also support 129 00:08:49,210 --> 00:08:49,840 ‫this web page. 130 00:08:49,840 --> 00:08:56,560 ‫So don't worry, I hope you got the idea how we are going to utilize this window prefix, which is are 131 00:08:56,560 --> 00:08:57,610 ‫mainly are web get. 132 00:08:57,610 --> 00:09:00,550 ‫Actually, all the others will be removed sooner or later. 133 00:09:01,120 --> 00:09:06,760 ‫So that's all for this important lecture and which should be understood about different points of browser. 134 00:09:07,210 --> 00:09:13,720 ‫Now head these are the browser version like Chrome is coming up with 92 and 94 version, and at this 135 00:09:13,720 --> 00:09:16,690 ‫point of time, that uses is zero point zero five percent. 136 00:09:16,720 --> 00:09:22,210 ‫But if I need to realize this property on the upcoming version as well, I need to utilize this would 137 00:09:22,210 --> 00:09:22,500 ‫get. 138 00:09:23,680 --> 00:09:25,240 ‫OK, I hope you got the idea. 139 00:09:25,480 --> 00:09:32,290 ‫Now this was one thing about Virgin Prefix Gordon, the other important thing is whenever we utilize 140 00:09:32,290 --> 00:09:38,230 ‫these type of property, for example, this linear gradient, there are chances that this color will 141 00:09:38,230 --> 00:09:38,590 ‫fail. 142 00:09:38,890 --> 00:09:40,510 ‫Now this background will fail. 143 00:09:40,900 --> 00:09:45,970 ‫And because of this same reason, we had a fallback option, which is our color. 144 00:09:46,240 --> 00:09:52,400 ‫So if by any chance this is not walking, this background amid this background is not working. 145 00:09:52,810 --> 00:09:55,180 ‫Our browser is going to utilize this color. 146 00:09:55,240 --> 00:09:56,230 ‫So if I jump here? 147 00:09:57,300 --> 00:10:03,930 ‫You can see now we are utilizing this color, so for now, let me remove this property also and get 148 00:10:03,930 --> 00:10:04,660 ‫back to my room. 149 00:10:04,680 --> 00:10:08,400 ‫You can see this color is walking because of our fallback option. 150 00:10:08,820 --> 00:10:15,570 ‫Remember, this is important at several position during our phone family selfie or utilize our fallback 151 00:10:15,570 --> 00:10:16,060 ‫option. 152 00:10:16,080 --> 00:10:19,670 ‫So by John said This bill is not supported by browsers. 153 00:10:19,770 --> 00:10:21,420 ‫It's not working with our browser. 154 00:10:21,780 --> 00:10:27,060 ‫We can fall back to our default or the other one are that option that we have provided. 155 00:10:27,660 --> 00:10:29,370 ‫So make sure to utilize this tool. 156 00:10:29,370 --> 00:10:36,450 ‫And also, you can check all the different options here with W3 school and you can search about browser 157 00:10:36,450 --> 00:10:37,410 ‫support reference. 158 00:10:37,950 --> 00:10:42,630 ‫And if you scroll down here, you can see that, OK, this is not working with Safari and you need to 159 00:10:42,630 --> 00:10:49,320 ‫utilize this, or there will be certain properties that might face issue with other browsers, like 160 00:10:49,320 --> 00:10:52,350 ‫maybe this font variant on something like this. 161 00:10:52,800 --> 00:10:56,070 ‫So there are certain things that you will learn as you grow. 162 00:10:56,400 --> 00:11:01,470 ‫Maybe this text combine upgrade some type of property, which is pretty rad, actually. 163 00:11:01,650 --> 00:11:06,660 ‫You are not going to utilize them on day to day basis, but this is a thing that I want to discuss. 164 00:11:08,410 --> 00:11:14,440 ‫So that's all for this lecture, I hope you got the understanding about how brutalized this render graphics 165 00:11:14,440 --> 00:11:16,280 ‫code and the other thing. 166 00:11:16,300 --> 00:11:16,660 ‫OK. 167 00:11:16,840 --> 00:11:17,770 ‫All this is done. 168 00:11:18,070 --> 00:11:23,650 ‫The other thing is whenever you are going to learn about science on, maybe whenever you are going to 169 00:11:23,650 --> 00:11:29,260 ‫learn about caspary processor, which is pretty advanced concept, you don't have to write and actually 170 00:11:29,260 --> 00:11:30,490 ‫you don't have to write them. 171 00:11:30,490 --> 00:11:34,950 ‫This will be automated, so you don't need to write them for individual item. 172 00:11:34,960 --> 00:11:40,330 ‫What you are going to do is you are going to write a file, something like this and then automatically 173 00:11:40,330 --> 00:11:46,510 ‫it will add all types of requirements like web could not mess on Maus, whatever is required. 174 00:11:46,870 --> 00:11:53,020 ‫So we will learn about this during the final section off our course, which is pretty advanced concept 175 00:11:53,020 --> 00:11:53,860 ‫actually source. 176 00:11:54,160 --> 00:11:59,260 ‫And we are going to discuss not other things, but this is one important thing that SAS do automatically, 177 00:11:59,260 --> 00:12:05,420 ‫which does include all these type of references so you don't have to do and add them manually. 178 00:12:05,440 --> 00:12:08,740 ‫It will be included automatically by SAS. 179 00:12:09,430 --> 00:12:11,770 ‫Thank you for following and I see you guys in the next one.