Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

Posts under CSS tag

125 Posts

Post

Replies

Boosts

Views

Activity

Apple mail is removing css border-radius when mail opened in safari or firefox
I am adding css border-radius in the html email. This renders fine on mail Client on Apple desktop device. However when I open same mail using webmail version on Safari or Firefox, the border-radius property is gone, it does not exist any more. There images does not render with rounded corner. However If I debug inspect element and add this property back manually, it renders fine. I think mail server sanitizer is stripping off border-radius for not so good reason. I also tried add rest of the possible ways border -radius can be specified, but nothing is allowed to browser mail. ( moz-border-radius:4px;webkit-border-radius:4px;o-border-radius:4px;)
Topic: Safari & Web SubTopic: General Tags:
0
0
1.1k
Apr ’23
Using native image sizes on the web vs responsive sizes
Is there any benefit to using the exact native image size on the web verses an image the scales with the viewports's size? For example, if I have a 1000x1000px 2x image, should I only display it at 500x500px and then use a media query / a different smaller image for smaller screens? Or would the 1000x1000px image scaling to smaller viewports be find? I'm trying to understand the tradeoffs of having a larger image scale with the container since it is less production work and in theory should look good at lower resolutions.
0
0
842
Apr ’23
Advice on implementing Dark Mode CSS with a theme toggle
Working on a website and I want to add a light / dark theme. I also want to add a toggle on the page to switch between those two modes. By default, it goes with the system color theme and then overrides are set with localstorage on the color toggle. What is the best way to implement the styles? Is using css vars with a selector between light and dark the best move? Should there be a default styling and then override based on a data attribute on body? (Would this cause flashing on load?) Any advice helps. Thanks in advance!
4
0
1.4k
Mar ’23
SMS HTML Button
Hi everyone. I designed an HTML template to send out to over 140k customers however, I've run into an issue I just can't seem to figure out. In the email is an HTML Button to send a text message with a pre-written message, that has always worked for Android and iOS. Now during testing, it's not working on iOS and no matter how I alter it, it's not clickable on iOS. Please help me! <a href="sms:/+11234567890?&body=Hello! I would like to place an order!" class="btn" title="">Text US</a> Here is a link to the code to edit and test. http://tpcg.io/_302Q2L I've tested on iOS v16.3.1
0
1
941
Mar ’23
Safari Mobile - CSS transition when navigating away
Hi, Safari Mobile - iOS 16.3.1 When a link is clicked the browser starts navigating away from a page. From that point on most CSS transitions seem to not be executed. E.g. the transition of the attribute width is not being executed. However the transition of the attribute transform is executed. When a link is being clicked the JS event listener adds the class loading to the alt-progress-bar node. The event is not stopped, so the browser starts unloading the page. I want the animation to be visible until the next page has loaded. Examples: This is the SCSS that does shows the transition: .alt-progress-bar{ position: fixed; top: 49px; height: 4px; background-color: var(--turbo-progress-bar-bg); z-index: 1031; transform: translate3d(-100%, 0, 0); width: 100%; transition: top linear 150ms; &.loading{ transform: translate3d(0, 0, 0); transition: transform ease-in-out 2s, top linear 150ms; } } This is the SCSS that does NOT shows the transition: .alt-progress-bar{ position: fixed; top: 49px; height: 4px; background-color: var(--turbo-progress-bar-bg); z-index: 1031; transform: translate3d(-100%, 0, 0); width: 0%; transition: top linear 150ms; &.loading{ width: 100%; transition: width ease-in-out 2s, top linear 150ms; } } I'm not able to find any documentation on this behaviour. Does someone have any insight? Thank you!
0
0
2k
Mar ’23
PresentationDragIndicator disappears in dark mode
Hello. I'm implementing a webview in my app. Recently I'm using presentationDetents(_:) which is supported in iOS 16. And I found a problem in this Instance Method. PresentationDrag Indicator disappears in dark mode. It does not disappear when used in a common View. However, when I use it in htmlView(), this phenomenon appears. [Even if I set Css for dark mode in htmlView(), the result is the same.] I would be grateful if you could tell me how to solve this. Is there any way to control the style of presentationDetents (frame) or PresentationDragIndicator? (I'm aware of the parameters that hide or show the Indicator, but I'm asking if I can have more control over it.) in MainView: ... ... .sheet(isPresented: $activeSheet) { VStack(){ HTMLView(html: urlToOpenInSheet) .presentationDetents([.medium, .large]) .padding(5) } } ... ... in htmlView: struct HTMLView: UIViewRepresentable { let html: String class CoordinatorHTML : NSObject, UITextViewDelegate { func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool { print(URL) return false } } func updateUIView(_ uiView: UITextView, context: UIViewRepresentableContext<Self>) { DispatchQueue.main.async { let addCss = "<head><style type=\"text/css\">" + """ @font-face { font-family: "Avenir"; } body {font-family: "Avenir"; font-size: 14px; line-height: 1.0; margin: 30px;} """ + " </style></head>" + "<body>" + html + "</body>" let data = Data(addCss.utf8) if let attributedString = try? NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding: String.Encoding.utf8.rawValue], documentAttributes: nil) { uiView.isEditable = false uiView.isSelectable = true uiView.attributedText = attributedString } } } func makeUIView(context: UIViewRepresentableContext<Self>) -> UITextView { let uiTextView = UITextView() uiTextView.delegate = context.coordinator uiTextView.isScrollEnabled = true uiTextView.backgroundColor = UIColor.white return uiTextView } func makeCoordinator() -> CoordinatorHTML { return CoordinatorHTML() } } And attached image: Light Mode Dark Mode
1
0
944
Feb ’23
Object-fit: fill does not work on safari for autoplay videos
I have applied object-fit fill to a video element. This video element spans entire screen and is set to 100vh height and 100vw width. In Chrome and Firefox it works fine and the video is stretched to fill the screen. However on safari object-fit fill does not stretch the video. Object-fit cover works fine, but fill doesn't. This video is set to autoplay. I have another hidden video element that plays a video on loop and shares the same space as the above mentioned video and is shown when the above mentioned video finishes playing. This video playing on loop stretches on applying obect-fit fill, but the other video doesn't stretch to fill the screen. Please help me with this. I have tried almost all CSS suggestion with min-height, position:relative, etc. but none have worked.
1
3
2.4k
Jan ’23
Iphone App written with Cordova and standard web technologies.
Can anyone give me a definitive answer to the following. I know a number of web technologies but not Swift or Xcode. I wish to write an app that makes use of Cordova and standard web technologies that will be accepted when submitted to the App Store. The one thing that I don't wish to do is spend the next four plus weeks developing it only to find it will be rejected. I don't really have time to expand my knowledge of Swift at this juncture. I have read so many contradicting rules so any guidance would be really appreciated. Many thanks.
2
0
2.5k
Jan ’23
CSS rule to style Safari 16.x only
Hello everyone I was wondering if someone already figured out the CSS rules to only style Safari 16 on MacOS. Since the update some of my stylings break (thanks apple dev team) and I really need to fix them as soon as possible. This rule: @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) and (display:flow-root) { .selector { property:value; } } } will not work kind regards Rey
2
0
5k
Jan ’23
env(safe-area-inset-bottom) not working in CSS
Hello everyone. I recently came across a problem with my website and that is the URL bar covering the content of the page. I searched across the internet for an answer and I found the CSS function env(safe-area-inset-bottom) on the padding-bottom property. However, this does not work, nothing happens when I add it to my code. Thanks, ytxaos.
3
3
4.9k
Dec ’22
CSS animation buggy on Safari
Im currently designing a website for a school project, we use iPads in school so the website has to be iOS and safari friendly, I have a problem with the animations im making, the starting animation is very buggy and its flickering the whole time until it ends, you can look at it by yourself: Website: https://k4zuki-dev.github.io/K4zuki-dev/ Github repository: https://github.com/K4zuki-dev/K4zuki-dev/tree/Geschichte It works on every browser except safari, I tried using the -webkit- prefix on the animations, still no sucsess, I've gone to many different solutions on the internet and nothing helped, maybe someone here can help me or is struggling with the same problem? Thanks in advance!
0
1
1.3k
Oct ’22
Safari IOS 16.0, css scale property bug
Hi there, Working on my website, I was using new shorthand property named scale. When using this scale property on a div to scale: 20; my images disappears (behind?) until scale transition ends. Works fine on Chrome. When using transform: scale(20) everything works fine. Link: https://drive.google.com/drive/folders/1HB13sujiXKI9xsm3h8g8dlaw0bFsIYrr?usp=sharing HTML : <div class="circle"></div> Css : .circle{   transition-duration: 600ms;   position: absolute;   width: 50px;   height: 50px;   background-color: red;   border-radius: 50%;   left: -50px;   top: -50px; } .scale-circle{   transition-duration: 600ms; scale: 20; /* BUG */ transform: scale(20); /* No bug */ } JS : const nav_overlay = document.querySelector('.circle') nav_overlay.classList.toggle('scale-circle')
0
1
2.1k
Oct ’22
Safari: "object-fit: cover" for the first 1-2 <video /> frames turns into "object-fit: contains"
Hello, I am Flip.Shop developer. Our site is having a problem displaying a Video whose size adjusts dynamically to the width and height of the parent component. Please visit this page: https://flip.shop and scroll through a few posts. On all normal browsers (Chrome/Firefox) the video loads nicely. But on Safari 15.5 (desktop and mobile) you can see a flicker for a while. The first frame of the video can't adjust to the size. Video component looks like this: <video preload="auto" loop="" playsinline="" webkit-playsinline="" x5-playsinline="" src="blob:https://flip.shop/1039dfe6-a1f4-4f80-822b-250665225c68" autoplay="" style="width: 100%; height: 100%;"> </video> and CSS of parent component looks like this: width: 100%; height: 100%; position: relative; & video { object-fit: cover; } Is there any solution to prevent video from going crazy in the Safari browser? The only workaround that seems to work is to show a poster covering the video until the video plays. Unfortunately, there is no event to inform that Safari is freaking out, so this poster has to be removed after a 300-500 millisecond timeout connected to the "play" event, which significantly delays the display of this video (on Safari).
6
2
5.0k
Oct ’22
BUG Report: 15.5 Video object-fit:fill Does not work anymore on load
With the iOS version 15.5 the CCS object-fit attribute does not work initially on Safari with videos anymore. When we inspect the DOM and uncheck the attribute, to recheck it, it works. But, of course that's not a proper workaround. Adding "important" does not work as well. If you reset the height: The result is flickering. On 15.4 everything works as expected.
6
4
4.7k
Oct ’22
White Space at the Bottom on IOS Safari
When I am applying the CSS property "position: fixed" on the body a white space appears at the bottom of the screen. steps to reproduce the issue: open any page on ios safari hide the address bar by scrolling up apply css property position fixed on body You will see the extra space at the bottom of the screen. This area will be filled with address bar if the address bar is open.
1
2
4.6k
Oct ’22
Logo stretching in a navbar only on iPhones
I am working on a WordPress woocommerce site and I am facing an issue where the logo is appearing stretched only on iPhone devices (on Android devices and Chrome device mode it's working fine). Logo stretch issue: Only one iPhone device (iOS 15 & 16) The logo appears without any issue: On Android devices  On Chrome device mode What could be the issue & how to fix it?
0
0
1k
Sep ’22
Apple mail is removing css border-radius when mail opened in safari or firefox
I am adding css border-radius in the html email. This renders fine on mail Client on Apple desktop device. However when I open same mail using webmail version on Safari or Firefox, the border-radius property is gone, it does not exist any more. There images does not render with rounded corner. However If I debug inspect element and add this property back manually, it renders fine. I think mail server sanitizer is stripping off border-radius for not so good reason. I also tried add rest of the possible ways border -radius can be specified, but nothing is allowed to browser mail. ( moz-border-radius:4px;webkit-border-radius:4px;o-border-radius:4px;)
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
1.1k
Activity
Apr ’23
Using native image sizes on the web vs responsive sizes
Is there any benefit to using the exact native image size on the web verses an image the scales with the viewports's size? For example, if I have a 1000x1000px 2x image, should I only display it at 500x500px and then use a media query / a different smaller image for smaller screens? Or would the 1000x1000px image scaling to smaller viewports be find? I'm trying to understand the tradeoffs of having a larger image scale with the container since it is less production work and in theory should look good at lower resolutions.
Replies
0
Boosts
0
Views
842
Activity
Apr ’23
Advice on implementing Dark Mode CSS with a theme toggle
Working on a website and I want to add a light / dark theme. I also want to add a toggle on the page to switch between those two modes. By default, it goes with the system color theme and then overrides are set with localstorage on the color toggle. What is the best way to implement the styles? Is using css vars with a selector between light and dark the best move? Should there be a default styling and then override based on a data attribute on body? (Would this cause flashing on load?) Any advice helps. Thanks in advance!
Replies
4
Boosts
0
Views
1.4k
Activity
Mar ’23
SMS HTML Button
Hi everyone. I designed an HTML template to send out to over 140k customers however, I've run into an issue I just can't seem to figure out. In the email is an HTML Button to send a text message with a pre-written message, that has always worked for Android and iOS. Now during testing, it's not working on iOS and no matter how I alter it, it's not clickable on iOS. Please help me! <a href="sms:/+11234567890?&body=Hello! I would like to place an order!" class="btn" title="">Text US</a> Here is a link to the code to edit and test. http://tpcg.io/_302Q2L I've tested on iOS v16.3.1
Replies
0
Boosts
1
Views
941
Activity
Mar ’23
overflow-x:clip property is not working correctly in safari
I can see overflow-x:clip property is not working correctly in safari, can someone say what work arounds can be used to overcome this situation?
Topic: Safari & Web SubTopic: General Tags:
Replies
0
Boosts
0
Views
1.1k
Activity
Mar ’23
Safari Mobile - CSS transition when navigating away
Hi, Safari Mobile - iOS 16.3.1 When a link is clicked the browser starts navigating away from a page. From that point on most CSS transitions seem to not be executed. E.g. the transition of the attribute width is not being executed. However the transition of the attribute transform is executed. When a link is being clicked the JS event listener adds the class loading to the alt-progress-bar node. The event is not stopped, so the browser starts unloading the page. I want the animation to be visible until the next page has loaded. Examples: This is the SCSS that does shows the transition: .alt-progress-bar{ position: fixed; top: 49px; height: 4px; background-color: var(--turbo-progress-bar-bg); z-index: 1031; transform: translate3d(-100%, 0, 0); width: 100%; transition: top linear 150ms; &.loading{ transform: translate3d(0, 0, 0); transition: transform ease-in-out 2s, top linear 150ms; } } This is the SCSS that does NOT shows the transition: .alt-progress-bar{ position: fixed; top: 49px; height: 4px; background-color: var(--turbo-progress-bar-bg); z-index: 1031; transform: translate3d(-100%, 0, 0); width: 0%; transition: top linear 150ms; &.loading{ width: 100%; transition: width ease-in-out 2s, top linear 150ms; } } I'm not able to find any documentation on this behaviour. Does someone have any insight? Thank you!
Replies
0
Boosts
0
Views
2k
Activity
Mar ’23
Text-decoration line-through misaligned only on Safari version 16.2 on Mac
When applying the CSS text-decoration property line through, the line is not aligned to the center With Safari on iOS it looks centered as expected. Any idea how to fix this?
Replies
0
Boosts
0
Views
938
Activity
Feb ’23
PresentationDragIndicator disappears in dark mode
Hello. I'm implementing a webview in my app. Recently I'm using presentationDetents(_:) which is supported in iOS 16. And I found a problem in this Instance Method. PresentationDrag Indicator disappears in dark mode. It does not disappear when used in a common View. However, when I use it in htmlView(), this phenomenon appears. [Even if I set Css for dark mode in htmlView(), the result is the same.] I would be grateful if you could tell me how to solve this. Is there any way to control the style of presentationDetents (frame) or PresentationDragIndicator? (I'm aware of the parameters that hide or show the Indicator, but I'm asking if I can have more control over it.) in MainView: ... ... .sheet(isPresented: $activeSheet) { VStack(){ HTMLView(html: urlToOpenInSheet) .presentationDetents([.medium, .large]) .padding(5) } } ... ... in htmlView: struct HTMLView: UIViewRepresentable { let html: String class CoordinatorHTML : NSObject, UITextViewDelegate { func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool { print(URL) return false } } func updateUIView(_ uiView: UITextView, context: UIViewRepresentableContext<Self>) { DispatchQueue.main.async { let addCss = "<head><style type=\"text/css\">" + """ @font-face { font-family: "Avenir"; } body {font-family: "Avenir"; font-size: 14px; line-height: 1.0; margin: 30px;} """ + " </style></head>" + "<body>" + html + "</body>" let data = Data(addCss.utf8) if let attributedString = try? NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding: String.Encoding.utf8.rawValue], documentAttributes: nil) { uiView.isEditable = false uiView.isSelectable = true uiView.attributedText = attributedString } } } func makeUIView(context: UIViewRepresentableContext<Self>) -> UITextView { let uiTextView = UITextView() uiTextView.delegate = context.coordinator uiTextView.isScrollEnabled = true uiTextView.backgroundColor = UIColor.white return uiTextView } func makeCoordinator() -> CoordinatorHTML { return CoordinatorHTML() } } And attached image: Light Mode Dark Mode
Replies
1
Boosts
0
Views
944
Activity
Feb ’23
Object-fit: fill does not work on safari for autoplay videos
I have applied object-fit fill to a video element. This video element spans entire screen and is set to 100vh height and 100vw width. In Chrome and Firefox it works fine and the video is stretched to fill the screen. However on safari object-fit fill does not stretch the video. Object-fit cover works fine, but fill doesn't. This video is set to autoplay. I have another hidden video element that plays a video on loop and shares the same space as the above mentioned video and is shown when the above mentioned video finishes playing. This video playing on loop stretches on applying obect-fit fill, but the other video doesn't stretch to fill the screen. Please help me with this. I have tried almost all CSS suggestion with min-height, position:relative, etc. but none have worked.
Replies
1
Boosts
3
Views
2.4k
Activity
Jan ’23
Iphone App written with Cordova and standard web technologies.
Can anyone give me a definitive answer to the following. I know a number of web technologies but not Swift or Xcode. I wish to write an app that makes use of Cordova and standard web technologies that will be accepted when submitted to the App Store. The one thing that I don't wish to do is spend the next four plus weeks developing it only to find it will be rejected. I don't really have time to expand my knowledge of Swift at this juncture. I have read so many contradicting rules so any guidance would be really appreciated. Many thanks.
Replies
2
Boosts
0
Views
2.5k
Activity
Jan ’23
CSS rule to style Safari 16.x only
Hello everyone I was wondering if someone already figured out the CSS rules to only style Safari 16 on MacOS. Since the update some of my stylings break (thanks apple dev team) and I really need to fix them as soon as possible. This rule: @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) and (display:flow-root) { .selector { property:value; } } } will not work kind regards Rey
Replies
2
Boosts
0
Views
5k
Activity
Jan ’23
env(safe-area-inset-bottom) not working in CSS
Hello everyone. I recently came across a problem with my website and that is the URL bar covering the content of the page. I searched across the internet for an answer and I found the CSS function env(safe-area-inset-bottom) on the padding-bottom property. However, this does not work, nothing happens when I add it to my code. Thanks, ytxaos.
Replies
3
Boosts
3
Views
4.9k
Activity
Dec ’22
CSS animation buggy on Safari
Im currently designing a website for a school project, we use iPads in school so the website has to be iOS and safari friendly, I have a problem with the animations im making, the starting animation is very buggy and its flickering the whole time until it ends, you can look at it by yourself: Website: https://k4zuki-dev.github.io/K4zuki-dev/ Github repository: https://github.com/K4zuki-dev/K4zuki-dev/tree/Geschichte It works on every browser except safari, I tried using the -webkit- prefix on the animations, still no sucsess, I've gone to many different solutions on the internet and nothing helped, maybe someone here can help me or is struggling with the same problem? Thanks in advance!
Replies
0
Boosts
1
Views
1.3k
Activity
Oct ’22
(Safari) Page theme changing from dark to light while scrolling on Vue.
I have a page written in Vue.js and Vite.js, and while I'm scrolling from top to bottom of the page, the theme changes. I thought that fixing linear-gradient CSS (see commit here will fix the issue, however, it didn't. The page source can be found here. This is a specific issue happening only in Safari browser.
Replies
1
Boosts
0
Views
856
Activity
Oct ’22
Safari IOS 16.0, css scale property bug
Hi there, Working on my website, I was using new shorthand property named scale. When using this scale property on a div to scale: 20; my images disappears (behind?) until scale transition ends. Works fine on Chrome. When using transform: scale(20) everything works fine. Link: https://drive.google.com/drive/folders/1HB13sujiXKI9xsm3h8g8dlaw0bFsIYrr?usp=sharing HTML : <div class="circle"></div> Css : .circle{   transition-duration: 600ms;   position: absolute;   width: 50px;   height: 50px;   background-color: red;   border-radius: 50%;   left: -50px;   top: -50px; } .scale-circle{   transition-duration: 600ms; scale: 20; /* BUG */ transform: scale(20); /* No bug */ } JS : const nav_overlay = document.querySelector('.circle') nav_overlay.classList.toggle('scale-circle')
Replies
0
Boosts
1
Views
2.1k
Activity
Oct ’22
Safari: "object-fit: cover" for the first 1-2 <video /> frames turns into "object-fit: contains"
Hello, I am Flip.Shop developer. Our site is having a problem displaying a Video whose size adjusts dynamically to the width and height of the parent component. Please visit this page: https://flip.shop and scroll through a few posts. On all normal browsers (Chrome/Firefox) the video loads nicely. But on Safari 15.5 (desktop and mobile) you can see a flicker for a while. The first frame of the video can't adjust to the size. Video component looks like this: <video preload="auto" loop="" playsinline="" webkit-playsinline="" x5-playsinline="" src="blob:https://flip.shop/1039dfe6-a1f4-4f80-822b-250665225c68" autoplay="" style="width: 100%; height: 100%;"> </video> and CSS of parent component looks like this: width: 100%; height: 100%; position: relative; & video { object-fit: cover; } Is there any solution to prevent video from going crazy in the Safari browser? The only workaround that seems to work is to show a poster covering the video until the video plays. Unfortunately, there is no event to inform that Safari is freaking out, so this poster has to be removed after a 300-500 millisecond timeout connected to the "play" event, which significantly delays the display of this video (on Safari).
Replies
6
Boosts
2
Views
5.0k
Activity
Oct ’22
iOS 16.0.2: Hybrid Application(Ionic) | SVG icons not visible if height and width is not mentioned.
Previously everything is working fine but after updating to 16.0.2 SVG icons suddenly disappears. I have noticed that icon with no height and width is disappear and rest all are visible. Is there any fix or I have to mention height and width for all the icons which are not working?
Replies
0
Boosts
0
Views
897
Activity
Oct ’22
BUG Report: 15.5 Video object-fit:fill Does not work anymore on load
With the iOS version 15.5 the CCS object-fit attribute does not work initially on Safari with videos anymore. When we inspect the DOM and uncheck the attribute, to recheck it, it works. But, of course that's not a proper workaround. Adding "important" does not work as well. If you reset the height: The result is flickering. On 15.4 everything works as expected.
Replies
6
Boosts
4
Views
4.7k
Activity
Oct ’22
White Space at the Bottom on IOS Safari
When I am applying the CSS property "position: fixed" on the body a white space appears at the bottom of the screen. steps to reproduce the issue: open any page on ios safari hide the address bar by scrolling up apply css property position fixed on body You will see the extra space at the bottom of the screen. This area will be filled with address bar if the address bar is open.
Replies
1
Boosts
2
Views
4.6k
Activity
Oct ’22
Logo stretching in a navbar only on iPhones
I am working on a WordPress woocommerce site and I am facing an issue where the logo is appearing stretched only on iPhone devices (on Android devices and Chrome device mode it's working fine). Logo stretch issue: Only one iPhone device (iOS 15 & 16) The logo appears without any issue: On Android devices  On Chrome device mode What could be the issue & how to fix it?
Replies
0
Boosts
0
Views
1k
Activity
Sep ’22