diff --git a/.cspell.json b/.cspell.json
index e0c82379389b..4c1f1c7a7e7b 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -30,7 +30,8 @@
         "aldus",
         "hangoff",
         "tcrm",
-        "scrollbars"
+        "scrollbars",
+        "callout"
     ],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [
diff --git a/projects/core/components/loader/loader.style.less b/projects/core/components/loader/loader.style.less
index ccbd7616880a..da0d83f8bd08 100644
--- a/projects/core/components/loader/loader.style.less
+++ b/projects/core/components/loader/loader.style.less
@@ -136,6 +136,11 @@
 }
 
 .t-icon {
+    .safari-only({
+        & {
+            overflow: visible;
+        }
+    });
     display: block;
     min-width: 1em;
     max-width: 1em;
@@ -146,13 +151,6 @@
     overflow: hidden;
     transform: scale(1, -1);
     animation: tuiLoaderRotate 3s linear infinite;
-
-    /* Safari Only */
-    @supports (-webkit-hyphens: none) {
-        & {
-            overflow: visible;
-        }
-    }
 }
 
 .t-circle {
diff --git a/projects/core/styles/mixins/browsers.less b/projects/core/styles/mixins/browsers.less
new file mode 100644
index 000000000000..1dfcca599f6b
--- /dev/null
+++ b/projects/core/styles/mixins/browsers.less
@@ -0,0 +1,23 @@
+.firefox-only(@ruleset) {
+    @supports (-moz-appearance: none) {
+        @ruleset();
+    }
+}
+
+.safari-only(@ruleset) {
+    @supports (-webkit-hyphens: none) {
+        @ruleset();
+    }
+}
+
+.ios-only(@ruleset) {
+    @supports (-webkit-touch-callout: none) {
+        @ruleset();
+    }
+}
+
+.chrome-only(@ruleset) {
+    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
+        @ruleset();
+    }
+}
diff --git a/projects/core/styles/mixins/browsers.scss b/projects/core/styles/mixins/browsers.scss
new file mode 100644
index 000000000000..c3e71dacca8a
--- /dev/null
+++ b/projects/core/styles/mixins/browsers.scss
@@ -0,0 +1,23 @@
+@mixin firefox-only {
+    @supports (-moz-appearance: none) {
+        @content;
+    }
+}
+
+@mixin safari-only {
+    @supports (-webkit-hyphens: none) {
+        @content;
+    }
+}
+
+@mixin ios-only {
+    @supports (-webkit-touch-callout: none) {
+        @content;
+    }
+}
+
+@mixin chrome-only {
+    @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
+        @content;
+    }
+}
diff --git a/projects/core/styles/mixins/textfield.less b/projects/core/styles/mixins/textfield.less
index 5273029cf464..693c336ba967 100644
--- a/projects/core/styles/mixins/textfield.less
+++ b/projects/core/styles/mixins/textfield.less
@@ -169,6 +169,12 @@
 .textfield-placeholder() {
     .transition(~'transform, font-size, color, letter-spacing');
     .text-overflow();
+    .safari-only({
+        & {
+            will-change: unset;
+            transition-property: transform, color, letter-spacing;
+        }
+    });
     display: block;
     width: 100%;
     user-select: none;
@@ -234,13 +240,6 @@
     :host[data-size='l']._focused._label-outside [tuiWrapper][data-mode='onDark'] & {
         color: var(--tui-text-02-night);
     }
-
-    @supports (-webkit-hyphens: none) {
-        & {
-            will-change: unset;
-            transition-property: transform, color, letter-spacing;
-        }
-    }
 }
 
 .input-icon() {
diff --git a/projects/core/styles/mixins/textfield.scss b/projects/core/styles/mixins/textfield.scss
index 082ae8c999c6..b5eb51659561 100644
--- a/projects/core/styles/mixins/textfield.scss
+++ b/projects/core/styles/mixins/textfield.scss
@@ -236,7 +236,7 @@ $line-height-l: 1.25rem;
         color: var(--tui-text-02-night);
     }
 
-    @supports (-webkit-hyphens: none) {
+    @include safari-only {
         & {
             will-change: unset;
             transition-property: transform, color, letter-spacing;
diff --git a/projects/core/styles/taiga-ui-local.less b/projects/core/styles/taiga-ui-local.less
index 951b830f300c..cce3d7ae1468 100644
--- a/projects/core/styles/taiga-ui-local.less
+++ b/projects/core/styles/taiga-ui-local.less
@@ -1,5 +1,9 @@
+/**
+ * @deprecated remove in 4.0
+ */
 @space: 0.25rem;
 
+@import 'mixins/browsers.less';
 @import 'mixins/mixins.less';
 @import 'mixins/picker.less';
 @import 'mixins/slider.less';
diff --git a/projects/core/styles/taiga-ui-local.scss b/projects/core/styles/taiga-ui-local.scss
index e2eaf9e80c57..d72f5b585880 100644
--- a/projects/core/styles/taiga-ui-local.scss
+++ b/projects/core/styles/taiga-ui-local.scss
@@ -1,5 +1,9 @@
-$space: 4px;
+/**
+ * @deprecated remove in 4.0
+ */
+$space: 0.25rem;
 
+@import 'mixins/browsers.scss';
 @import 'mixins/mixins.scss';
 @import 'mixins/picker.scss';
 @import 'mixins/slider.scss';
diff --git a/projects/core/styles/theme/wrapper/base.less b/projects/core/styles/theme/wrapper/base.less
index d663e6dd5060..12de153fc43f 100644
--- a/projects/core/styles/theme/wrapper/base.less
+++ b/projects/core/styles/theme/wrapper/base.less
@@ -33,10 +33,10 @@
     });
 
     // Temporary hide focus in Safari until we figure out a better approach
-    @supports (-webkit-hyphens: none) {
+    .safari-only({
         :focus-visible &,
         &:focus-visible {
             --tui-focus: transparent !important;
         }
-    }
+    });
 }