Revision of Web Tricks and Methods

Korbs revised this gist 1739770864. Go to revision

1 file changed, 6 insertions

README.md

			@@ -116,12 +116,18 @@ There are many ways now to center an element on screen, here are a few that I us
116	116		Use the `light-dark` CSS function. The first color you set is for the light theme and the second color is for the dark theme.
117	117
118	118		```css
	119	+	:root {
	120	+	color-scheme: light dark;
	121	+	}
119	122		.classname {
120	123		background: light-dark(#FFFFFF,#000000);
121	124		}
122	125		```
123	126
124	127		```css
	128	+	:root {
	129	+	color-scheme: light dark;
	130	+	}
125	131		.classname {
126	132		background: light-dark(rgb(255,255,255), rgb(0,0,0));
127	133		}

Korbs revised this gist 1739770787. Go to revision

1 file changed, 10 insertions, 6 deletions

README.md

			@@ -101,7 +101,7 @@ There are many ways now to center an element on screen, here are a few that I us
101	101
102	102		### Light / Dark Theming
103	103
104		-	Media Method
	104	+	Media Method \| [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
105	105
106	106		```css
107	107		@media (prefers-color-scheme: dark) {
			@@ -111,7 +111,7 @@ There are many ways now to center an element on screen, here are a few that I us
111	111		}
112	112		```
113	113
114		-	Newer `light-dark` Method
	114	+	Newer `light-dark` Method \| [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)
115	115
116	116		Use the `light-dark` CSS function. The first color you set is for the light theme and the second color is for the dark theme.
117	117
			@@ -127,8 +127,12 @@ Use the `light-dark` CSS function. The first color you set is for the light them
127	127		}
128	128		```
129	129
130		-	### Fix Stretchy Images
	130	+	### Fix Stretchy Images \| [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)
131	131
132		-	\| Stretchy \| Fixed \|
133		-	\|-\|-\|
134		-	\| <img src="https://image.proxy.sudovanilla.org/560,260/https://md.sudovanilla.org/images/pexels-jeremy-bishop-1260133-2422970.jpg"/> \| <img src="https://image.proxy.sudovanilla.org/560,260/https://md.sudovanilla.org/images/pexels-jeremy-bishop-1260133-2422970.jpg"/> \| <img style="object-size: cover" src="https://image.proxy.sudovanilla.org/560,260/https://md.sudovanilla.org/images/pexels-jeremy-bishop-1260133-2422970.jpg"/> \|
	132	+	When you force the size of an image, this may cause it to stretch a bit, luckily this is an easy fix.
	133	+
	134	+	```css
	135	+	.classname-img {
	136	+	object-fit: cover;
	137	+	}
	138	+	```

Korbs revised this gist 1739770490. Go to revision

1 file changed, 7 insertions, 1 deletion

README.md

			@@ -125,4 +125,10 @@ Use the `light-dark` CSS function. The first color you set is for the light them
125	125		.classname {
126	126		background: light-dark(rgb(255,255,255), rgb(0,0,0));
127	127		}
128		-	```
	128	+	```
	129	+
	130	+	### Fix Stretchy Images
	131	+
	132	+	\| Stretchy \| Fixed \|
	133	+	\|-\|-\|
	134	+	\| <img src="https://image.proxy.sudovanilla.org/560,260/https://md.sudovanilla.org/images/pexels-jeremy-bishop-1260133-2422970.jpg"/> \| <img src="https://image.proxy.sudovanilla.org/560,260/https://md.sudovanilla.org/images/pexels-jeremy-bishop-1260133-2422970.jpg"/> \| <img style="object-size: cover" src="https://image.proxy.sudovanilla.org/560,260/https://md.sudovanilla.org/images/pexels-jeremy-bishop-1260133-2422970.jpg"/> \|

Korbs revised this gist 1739770242. Go to revision

1 file changed, 14 insertions, 12 deletions

README.md

			@@ -1,5 +1,19 @@
1	1		# Web Tricks and Methods
2	2
	3	+	## HTML
	4	+	### Number Keyboard for Mobile Devices
	5	+
	6	+	When it comes to creating a number input, we would create an `<input/>` with the `type` attribute set to `number`. This makes arrow buttons show up that can let us go up and down.
	7	+
	8	+	On mobile, we don't want this. It's expected by the end-user that their numberic keyboard shows up, so we set the `inputmode` instead.
	9	+
	10	+	```html
	11	+	<input type="number" inputmode="numberic"/>
	12	+	```
	13	+
	14	+	We could also change the `type` attribute to `text` to get rid of the arrows if we want to.
	15	+
	16	+	## CSS
3	17		### Outline vs Outline Color
4	18
5	19		We all decided at some point to set the `outline` option to the `none` variable for our buttons, this is probably because we came up with our own thing with another method like the use of `box-shadow` or something else.
			@@ -34,18 +48,6 @@ We can slap an outline on all elements and see their width, height, and other as
34	48		}
35	49		```
36	50
37		-	### Number Keyboard for Mobile Devices
38		-
39		-	When it comes to creating a number input, we would create an `<input/>` with the `type` attribute set to `number`. This makes arrow buttons show up that can let us go up and down.
40		-
41		-	On mobile, we don't want this. It's expected by the end-user that their numberic keyboard shows up, so we set the `inputmode` instead.
42		-
43		-	```html
44		-	<input type="number" inputmode="numberic"/>
45		-	```
46		-
47		-	We could also change the `type` attribute to `text` to get rid of the arrows if we want to.
48		-
49	51		### Centering DIV
50	52
51	53		There are many ways now to center an element on screen, here are a few that I used over the past 7 years.

Korbs revised this gist 1739770151. Go to revision

1 file changed, 2 insertions, 2 deletions

README.md

			@@ -99,7 +99,7 @@ There are many ways now to center an element on screen, here are a few that I us
99	99
100	100		### Light / Dark Theming
101	101
102		-	Media Method
	102	+	Media Method
103	103
104	104		```css
105	105		@media (prefers-color-scheme: dark) {
			@@ -109,7 +109,7 @@ There are many ways now to center an element on screen, here are a few that I us
109	109		}
110	110		```
111	111
112		-	Newer `light-dark` Method
	112	+	Newer `light-dark` Method
113	113
114	114		Use the `light-dark` CSS function. The first color you set is for the light theme and the second color is for the dark theme.
115	115

Korbs revised this gist 1739770135. Go to revision

1 file changed, 28 insertions

README.md

			@@ -95,4 +95,32 @@ There are many ways now to center an element on screen, here are a few that I us
95	95		.classname {
96	96		margin: auto;
97	97		}
	98	+	```
	99	+
	100	+	### Light / Dark Theming
	101	+
	102	+	Media Method
	103	+
	104	+	```css
	105	+	@media (prefers-color-scheme: dark) {
	106	+	.classname {
	107	+	background: #000000;
	108	+	}
	109	+	}
	110	+	```
	111	+
	112	+	Newer `light-dark` Method
	113	+
	114	+	Use the `light-dark` CSS function. The first color you set is for the light theme and the second color is for the dark theme.
	115	+
	116	+	```css
	117	+	.classname {
	118	+	background: light-dark(#FFFFFF,#000000);
	119	+	}
	120	+	```
	121	+
	122	+	```css
	123	+	.classname {
	124	+	background: light-dark(rgb(255,255,255), rgb(0,0,0));
	125	+	}
98	126		```

Korbs revised this gist 1739769856. Go to revision

No changes

Korbs revised this gist 1739769841. Go to revision

1 file changed, 98 insertions

README.md(file created)

		@@ -0,0 +1,98 @@
1	+	# Web Tricks and Methods
2	+
3	+	### Outline vs Outline Color
4	+
5	+	We all decided at some point to set the `outline` option to the `none` variable for our buttons, this is probably because we came up with our own thing with another method like the use of `box-shadow` or something else.
6	+
7	+	I don't recommend continuing overriding the default `outline` option, that's because if an end-user uses high-contrast on their operating system, these other methods like `box-shadow` won't show up for them.
8	+
9	+	Instead, we should be using `outline-color` instead to get ride of the ugly outline color. Doing so will help end-users that use high-contrast.
10	+
11	+	```css
12	+	/* Don't */
13	+	.classname {
14	+	outline: none;
15	+	}
16	+
17	+	/* Do */
18	+	.classname {
19	+	outline-color: transparent;
20	+	}
21	+	```
22	+
23	+	### Debugging
24	+
25	+	When we're debugging a function or something else in JavaScript, we tend to use the good old `console.log()` method. However, we can't really do much with this method when it comes to debugging CSS, as there's very little that JavaScript can do to help us.
26	+
27	+	As example, if the horizontal scrollbar shows up when nothing appears at first to long enough to cause this. We can use this method to figure out what's causing this.
28	+
29	+	We can slap an outline on all elements and see their width, height, and other aspects when doing this. This can help us figure out why in the example provided the horizontal scrollbar showed up.
30	+
31	+	```css
32	+	* {
33	+	background: rgba(100,100,100,0.25);
34	+	}
35	+	```
36	+
37	+	### Number Keyboard for Mobile Devices
38	+
39	+	When it comes to creating a number input, we would create an `<input/>` with the `type` attribute set to `number`. This makes arrow buttons show up that can let us go up and down.
40	+
41	+	On mobile, we don't want this. It's expected by the end-user that their numberic keyboard shows up, so we set the `inputmode` instead.
42	+
43	+	```html
44	+	<input type="number" inputmode="numberic"/>
45	+	```
46	+
47	+	We could also change the `type` attribute to `text` to get rid of the arrows if we want to.
48	+
49	+	### Centering DIV
50	+
51	+	There are many ways now to center an element on screen, here are a few that I used over the past 7 years.
52	+
53	+	Old Fashion
54	+
55	+	```css
56	+	.classname {
57	+	position: absolute;
58	+	top: 50%;
59	+	left: 50%;
60	+	transform: translate(-50%, -50%);
61	+	}
62	+	```
63	+
64	+	```css
65	+	.classname {
66	+	position: absolute;
67	+	top: 50%;
68	+	left: 50%;
69	+	translate: -50% -50%;
70	+	}
71	+	```
72	+
73	+	```css
74	+	.classname {
75	+	position: absolute;
76	+	inset: 0;
77	+	margin: auto;
78	+	}
79	+	```
80	+
81	+	> For all old fashion versions, if you're trying to center an element inside of a DIV, make sure that DIV's position is already set to `relative`.
82	+
83	+	Flex
84	+
85	+	```css
86	+	.classname {
87	+	display: flex; /* "grid" also works here too */
88	+	justify-content: center;
89	+	align-items: center;
90	+	}
91	+	```
92	+	Margin
93	+
94	+	```css
95	+	.classname {
96	+	margin: auto;
97	+	}
98	+	```

Newer Older