Skip to content

Commit d672e96

Browse files
jackdomleo7jackdomleo7
committed
feat: Use modern logical CSS properties for improved internationalisation
1 parent 1ab447f commit d672e96

12 files changed

+224
-187
lines changed

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ Play with Cooltipz.css on [CodePen](https://codepen.io/JackDomleo/pen/mderEeG).
2929
- Pure CSS, no JavaScript
3030
- Highly customisable
3131
- **Multiple versions available** - Combined, data attributes only, or classes only for optimal bundle size
32+
- **Internationalisation support** - Full RTL language support and modern CSS logical properties for global accessibility
3233
- Accessible with `aria-label` attributes
3334
- Automatically disables animation if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion?ref=cooltipz.jackdomleo.dev)
3435
- Options to use classes or `data-` attributes
@@ -60,15 +61,15 @@ In the below CDN links:
6061
- Replace `:version` with a version [listed here](https://www.npmjs.com/package/cooltipz-css?activeTab=versions) (latest version is always recommended). If you always want to get the latest stylesheet, remove `@:version` completely (Not recommended).
6162
- Replace `:file` with one of the below:
6263

63-
**Combined (full functionality - 3.06kB when compressed):**
64+
**Combined (full functionality - 3.13kB when compressed):**
6465
- `cooltipz.css` <sub><sup>(Expanded stylesheet)</sup></sub>
6566
- `cooltipz.min.css` <sub><sup>(Minified stylesheet)</sup></sub>
6667

67-
**Data attributes only (smaller bundle - 1.81kB when compressed):**
68+
**Data attributes only (smaller bundle - 1.88kB when compressed):**
6869
- `cooltipz-data-attrs.css` <sub><sup>(Expanded stylesheet)</sup></sub>
6970
- `cooltipz-data-attrs.min.css` <sub><sup>(Minified stylesheet)</sup></sub>
7071

71-
**Classes only (smaller bundle - 1.79kB when compressed):**
72+
**Classes only (smaller bundle - 1.85kB when compressed):**
7273
- `cooltipz-classes.css` <sub><sup>(Expanded stylesheet)</sup></sub>
7374
- `cooltipz-classes.min.css` <sub><sup>(Minified stylesheet)</sup></sub>
7475

‎cooltipz-classes.css‎

Lines changed: 46 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -57,24 +57,24 @@
5757
}
5858

5959
[aria-label][class*=cooltipz].cooltipz--right::before {
60-
border-right-color: var(--cooltipz-border-color, #1f1f1f);
60+
border-inline-end-color: var(--cooltipz-border-color, #1f1f1f);
6161
-webkit-filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.3));
6262
filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.3));
6363
}
6464
@media (forced-colors: active) {
6565
[aria-label][class*=cooltipz].cooltipz--right::before {
66-
border-right-color: CanvasText;
66+
border-inline-end-color: CanvasText;
6767
}
6868
}
6969

7070
[aria-label][class*=cooltipz].cooltipz--left::before {
71-
border-left-color: var(--cooltipz-border-color, #1f1f1f);
71+
border-inline-start-color: var(--cooltipz-border-color, #1f1f1f);
7272
-webkit-filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.3));
7373
filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.3));
7474
}
7575
@media (forced-colors: active) {
7676
[aria-label][class*=cooltipz].cooltipz--left::before {
77-
border-left-color: CanvasText;
77+
border-inline-start-color: CanvasText;
7878
}
7979
}
8080

@@ -104,7 +104,8 @@
104104
-moz-osx-font-smoothing: grayscale;
105105
font-style: normal;
106106
font-weight: 400;
107-
padding: 0.5em 1em;
107+
padding-block: 0.5em;
108+
padding-inline: 1em;
108109
text-indent: 0;
109110
text-shadow: none;
110111
white-space: nowrap;
@@ -146,7 +147,8 @@
146147
transition-delay: var(--cooltipz-delay-show, 0s);
147148
}
148149
[aria-label][class*=cooltipz].cooltipz--top::after {
149-
margin-bottom: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
150+
-webkit-margin-after: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
151+
margin-block-end: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
150152
-webkit-transform: translate(-50%, var(--cooltipz-slide, 6px));
151153
transform: translate(-50%, var(--cooltipz-slide, 6px));
152154
}
@@ -155,8 +157,8 @@
155157
transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), var(--cooltipz-slide, 6px));
156158
}
157159
[aria-label][class*=cooltipz].cooltipz--top::after, [aria-label][class*=cooltipz].cooltipz--top::before {
158-
bottom: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
159-
left: 50%;
160+
inset-block-end: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
161+
inset-inline-start: 50%;
160162
-webkit-transform-origin: top;
161163
transform-origin: top;
162164
}
@@ -169,18 +171,19 @@
169171
transform: translate(-50%, 0);
170172
}
171173
[aria-label][class*=cooltipz].cooltipz--top-left::after {
172-
left: 0;
173-
margin-bottom: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
174+
inset-inline-start: 0;
175+
-webkit-margin-after: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
176+
margin-block-end: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
174177
-webkit-transform: translate(0, var(--cooltipz-slide, 6px));
175178
transform: translate(0, var(--cooltipz-slide, 6px));
176179
}
177180
[aria-label][class*=cooltipz].cooltipz--top-left::before {
178-
left: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
181+
inset-inline-start: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
179182
-webkit-transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), var(--cooltipz-slide, 6px));
180183
transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), var(--cooltipz-slide, 6px));
181184
}
182185
[aria-label][class*=cooltipz].cooltipz--top-left::after, [aria-label][class*=cooltipz].cooltipz--top-left::before {
183-
bottom: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
186+
inset-block-end: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
184187
-webkit-transform-origin: top;
185188
transform-origin: top;
186189
}
@@ -193,18 +196,19 @@
193196
transform: translate(0, 0);
194197
}
195198
[aria-label][class*=cooltipz].cooltipz--top-right::after {
196-
margin-bottom: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
197-
right: 0;
199+
-webkit-margin-after: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
200+
margin-block-end: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
201+
inset-inline-end: 0;
198202
-webkit-transform: translate(0, var(--cooltipz-slide, 6px));
199203
transform: translate(0, var(--cooltipz-slide, 6px));
200204
}
201205
[aria-label][class*=cooltipz].cooltipz--top-right::before {
202-
right: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
206+
inset-inline-end: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
203207
-webkit-transform: translate(calc(50% + var(--cooltipz-arrow-offset, 0px)), var(--cooltipz-slide, 6px));
204208
transform: translate(calc(50% + var(--cooltipz-arrow-offset, 0px)), var(--cooltipz-slide, 6px));
205209
}
206210
[aria-label][class*=cooltipz].cooltipz--top-right::after, [aria-label][class*=cooltipz].cooltipz--top-right::before {
207-
bottom: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
211+
inset-block-end: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
208212
-webkit-transform-origin: top;
209213
transform-origin: top;
210214
}
@@ -217,7 +221,8 @@
217221
transform: translate(0, 0);
218222
}
219223
[aria-label][class*=cooltipz].cooltipz--bottom::after {
220-
margin-top: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
224+
-webkit-margin-before: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
225+
margin-block-start: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
221226
-webkit-transform: translate(-50%, calc(var(--cooltipz-slide, 6px) * -1));
222227
transform: translate(-50%, calc(var(--cooltipz-slide, 6px) * -1));
223228
}
@@ -226,8 +231,8 @@
226231
transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), calc(var(--cooltipz-slide, 6px) * -1));
227232
}
228233
[aria-label][class*=cooltipz].cooltipz--bottom::after, [aria-label][class*=cooltipz].cooltipz--bottom::before {
229-
left: 50%;
230-
top: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
234+
inset-inline-start: 50%;
235+
inset-block-start: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
231236
-webkit-transform-origin: bottom;
232237
transform-origin: bottom;
233238
}
@@ -240,18 +245,19 @@
240245
transform: translate(-50%, 0);
241246
}
242247
[aria-label][class*=cooltipz].cooltipz--bottom-left::after {
243-
left: 0;
244-
margin-top: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
248+
inset-inline-start: 0;
249+
-webkit-margin-before: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
250+
margin-block-start: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
245251
-webkit-transform: translate(0, calc(var(--cooltipz-slide, 6px) * -1));
246252
transform: translate(0, calc(var(--cooltipz-slide, 6px) * -1));
247253
}
248254
[aria-label][class*=cooltipz].cooltipz--bottom-left::before {
249-
left: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
255+
inset-inline-start: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
250256
-webkit-transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), calc(var(--cooltipz-slide, 6px) * -1));
251257
transform: translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)), calc(var(--cooltipz-slide, 6px) * -1));
252258
}
253259
[aria-label][class*=cooltipz].cooltipz--bottom-left::after, [aria-label][class*=cooltipz].cooltipz--bottom-left::before {
254-
top: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
260+
inset-block-start: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
255261
-webkit-transform-origin: bottom;
256262
transform-origin: bottom;
257263
}
@@ -264,18 +270,19 @@
264270
transform: translate(0, 0);
265271
}
266272
[aria-label][class*=cooltipz].cooltipz--bottom-right::after {
267-
margin-top: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
268-
right: 0;
273+
-webkit-margin-before: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
274+
margin-block-start: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
275+
inset-inline-end: 0;
269276
-webkit-transform: translate(0, calc(var(--cooltipz-slide, 6px) * -1));
270277
transform: translate(0, calc(var(--cooltipz-slide, 6px) * -1));
271278
}
272279
[aria-label][class*=cooltipz].cooltipz--bottom-right::before {
273-
right: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
280+
inset-inline-end: calc(var(--cooltipz-arrow-size, 0.3125rem) / 2);
274281
-webkit-transform: translate(calc(50% + var(--cooltipz-arrow-offset, 0px)), calc(var(--cooltipz-slide, 6px) * -1));
275282
transform: translate(calc(50% + var(--cooltipz-arrow-offset, 0px)), calc(var(--cooltipz-slide, 6px) * -1));
276283
}
277284
[aria-label][class*=cooltipz].cooltipz--bottom-right::after, [aria-label][class*=cooltipz].cooltipz--bottom-right::before {
278-
top: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
285+
inset-block-start: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
279286
-webkit-transform-origin: bottom;
280287
transform-origin: bottom;
281288
}
@@ -288,7 +295,8 @@
288295
transform: translate(0, 0);
289296
}
290297
[aria-label][class*=cooltipz].cooltipz--left::after {
291-
margin-right: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
298+
-webkit-margin-end: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
299+
margin-inline-end: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
292300
-webkit-transform: translate(var(--cooltipz-slide, 6px), -50%);
293301
transform: translate(var(--cooltipz-slide, 6px), -50%);
294302
}
@@ -297,8 +305,8 @@
297305
transform: translate(var(--cooltipz-slide, 6px), calc(-50% + var(--cooltipz-arrow-offset, 0px)));
298306
}
299307
[aria-label][class*=cooltipz].cooltipz--left::after, [aria-label][class*=cooltipz].cooltipz--left::before {
300-
right: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
301-
top: 50%;
308+
inset-inline-end: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
309+
inset-block-start: 50%;
302310
-webkit-transform-origin: left;
303311
transform-origin: left;
304312
}
@@ -311,7 +319,8 @@
311319
transform: translate(0, -50%);
312320
}
313321
[aria-label][class*=cooltipz].cooltipz--right::after {
314-
margin-left: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
322+
-webkit-margin-start: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
323+
margin-inline-start: calc(var(--cooltipz-arrow-size, 0.3125rem) * 2);
315324
-webkit-transform: translate(calc(var(--cooltipz-slide, 6px) * -1), -50%);
316325
transform: translate(calc(var(--cooltipz-slide, 6px) * -1), -50%);
317326
}
@@ -320,8 +329,8 @@
320329
transform: translate(calc(var(--cooltipz-slide, 6px) * -1), calc(-50% + var(--cooltipz-arrow-offset, 0px)));
321330
}
322331
[aria-label][class*=cooltipz].cooltipz--right::after, [aria-label][class*=cooltipz].cooltipz--right::before {
323-
left: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
324-
top: 50%;
332+
inset-inline-start: calc(100% - var(--cooltipz-arrow-size, 0.3125rem) / 2);
333+
inset-block-start: 50%;
325334
-webkit-transform-origin: right;
326335
transform-origin: right;
327336
}
@@ -334,16 +343,16 @@
334343
transform: translate(0, -50%);
335344
}
336345
[aria-label][class*=cooltipz].cooltipz--fit::after {
337-
width: 100%;
346+
inline-size: 100%;
338347
}
339348
[aria-label][class*=cooltipz].cooltipz--small::after {
340-
width: var(--cooltipz-small, 6.25rem);
349+
inline-size: var(--cooltipz-small, 6.25rem);
341350
}
342351
[aria-label][class*=cooltipz].cooltipz--medium::after {
343-
width: var(--cooltipz-medium, 12.5rem);
352+
inline-size: var(--cooltipz-medium, 12.5rem);
344353
}
345354
[aria-label][class*=cooltipz].cooltipz--large::after {
346-
width: var(--cooltipz-large, 18.75rem);
355+
inline-size: var(--cooltipz-large, 18.75rem);
347356
}
348357
[aria-label][class*=cooltipz].cooltipz--custom::after {
349358
white-space: pre;

‎cooltipz-classes.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)