Vue 3 now allows for disabling the automatic renaming of CSS properties like "top/bottom/left/right" to "inset"

I noticed that Vue (or maybe Vite) automatically changes my css style attributes from "top: 0; right: 0; left: 0; bottom: 0;" to "inset: 0px;"

However, this adaptation doesn't work well for older browsers that do not support the inset property, causing a bug in the design.

To resolve this issue, I attempted to define the styles explicitly like so:

:style="'top: 0; right: 0;' + 'left: 0; bottom: 0;'"

Unfortunately, it still gets converted to inset despite my efforts.

Additionally, I have specified the following configuration in my vite.config.ts file:

build: {
    target: 'es2015'
  }

My expectation was to maintain the styles exactly as I input them without any automatic conversions.

cssvue.jsvuejs3vite

Answer №1

Where can you locate the conversion?

Have you thoroughly examined your file build to determine if there is an inset instead of bottom, top, left, or other relevant property?

In some cases, the conversion may not be due to the project or build itself, but rather to the browser's own behavior. You can refer to this link for more information.

If this is the scenario, it is not necessarily a problem, as the browser may simply be supporting the change.

Answer №2

If you're looking to enhance your code with logical properties, consider utilizing a polyfill specific for PostCSS like postcss-logical. This tool allows you to maintain logical property authoring while rectifying browser support issues. Once full support is achieved, the need for the polyfill will diminish.

Are you aware of whether your project utilizes Lightning or PostCSS?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is my data not loading on the first try when both Vuex's mount() and computed() are executed in the same component?

Using the action, I retrieve all products and then utilize the computed method within the same component to display the data. Below is the structure of the component: <template v-for="product in allProducts"> <div class="ap-table-content"> ...

vue.jsvuejs2vuex

Encountering difficulty when attempting to load a Vue component within a Blade file in Laravel 8

I successfully loaded Vue components in previous versions of Laravel by following these steps: In app.js located within resources/app.js, I declared the component like so: Vue.component('upload-menu', require('./components/UploadMenu.vue&ap ...

laravelvue.js

Horizontal scrollbar appearing on larger screens

My website utilizes bootstrap and some custom css. I have a specific css class named "full-width" designed to break out of the parent bootstrap "container" in order to make the background color extend across the entire width of the screen. However, I recen ...

htmlcss

Firebase hosting adjusts the transparency of an element to 1% whenever it detects the presence of CSS opacity

I'm currently working on a website using Vue.js and Firebase. Everything runs smoothly locally, including a button with a desired low opacity. However, when I deploy the site to Firebase Hosting, the button's opacity inexplicably changes to 1% an ...

cssvue.jssassfirebase-hosting

What could be causing my CSS div class to cover up the image in the background?

Within my HTML code, I have a <div> that contains a whole partial view: <div class="bkgImg"> /* content goes here */ </div> Inside this main <div>, there are two additional <div> elements - one without a class and one wi ...

htmlcss

Creating a mind map: A step-by-step guide

I'm currently developing an algorithm to create a mind map. The key focus is on organizing the nodes intelligently to prevent any overlap and ensure a visually pleasing layout. Take a look at this snapshot (from MindNode) as an example: Any suggestio ...

javascripthtmlcssalgorithmmindmapping

Steps for resetting a div's display after adjusting the device size

I have a code that displays horizontally on desktop screens and vertically on phones. It includes an x button (closebtn) that is only displayed on phones to close the menu bar. How can I automatically display it again after resizing the page back to deskto ...

javascripthtmlcssresponsive-design

Tips for rearranging button placements by utilizing multiple owl carousels across various webpages

I have successfully implemented two owl carousels on my Shopify website, and they are both functioning properly. However, I am facing an issue with the navigation buttons on the second page. The navigation buttons seem to be picking up a style that I had i ...

javascripthtmlcssshopifyowl-carousel

Utilize Flexbox to arrange elements in a column direction without relying on the position property in CSS

Flexbox - align element to the right using flex-direction: column; without relying on position in CSS Hello everyone, I am looking to move my row element to the right without using positioning. This code includes flex-direction: column; and I do not have ...

htmlcssflexbox

Using getServerSideProps in Next.js is preventing the global css from loading

In my Next.js application, I have defined global styles in the file /styles/globals.css and imported them in _app.tsx. // import default style import "../styles/globals.css"; function MyApp({ Component, pageProps }) { return <Component {...pageProps ...

cssnext.js

Prevent css from reverting to its original rotation position

I attempted to style the navigation list with the following CSS: #navlist:hover #left-arrow { border-top: 10px solid white; position: relative; transform: translateX(120.2px) rotate(180deg); } Would it be better to use jQuery for the rotation ...

jqueryhtmlcss

The issue of a centered image not displaying properly and the inability to adjust the font

I'm trying to get the image to display bigger and in the center, but no matter what I try it's not working. HTML: <div class="content-grid"> <img src="test.jpg" /> </div> CSS: .content-grid img{ display: block; margin: ...

htmlcss

Attempting to showcase a button element within a popover, although it is failing to appear

I have implemented a feature where a popover appears when hovering over an inbox icon (font-awesome). However, I am facing an issue with displaying a button on the second row within the popover. The title is showing up fine, but the button is not appearing ...

javascripthtmljquerycssbootstrap-4

Styling the Container Component in ReactJS

I need to apply some styling to the "Forms_formline__3DRaL" div (shown below). This div is generated by a component, but it seems that the style I want to add is being applied to the input instead of its parent div. How can I use ReactJS to set the style " ...

cssreactjsnext.js

Press the div, excluding the button - Vue

I have a basic div that spans 100% of the width, containing a button inside. The issue I'm facing is that when I add a click event to the div, the entire div becomes clickable (including the button within it). What I want is for the whole div to be ...

javascriptcssvue.jsvuejs2vuejs3

Troubleshooting the "Failed to mount component" error in Vue: fixing template or render function definition issues

Struggling with writing a Vue component, encountering the issue: Failed to mount component: template or render function not defined. Tried various fixes like adding default when importing the component, but none of them seem to work. My component code is i ...

javascriptvue.jsvue-componentvuex

Sorry, there was an error with Vue-i18n: Unable to access the 'config' property because it is undefined

Let's start by examining what functions correctly in App.js import router from './routes.js'; import VueI18n from 'vue-i18n'; const messages = { en: { message: { hello: 'hello world' } } } // Create ...

vue.jsvue-i18n

Width and left values don't play well with absolute positioning

I am encountering an issue where a div with absolute positioning, which is a child of another absolute positioned element, is not behaving as expected. Despite setting width:100%; left:1px; right:1px on the child element, it extends beyond its parent. < ...

htmlcss

Utilize jQuery setInterval to dynamically add and remove classes on elements

My goal is to display my image in a way that resembles waving flames. I decided to achieve this effect by using two layers (flame tongues) stacked on top of each other in the same position. My initial approach was to hide one flame tongue while showing the ...

javascriptjqueryhtmlcss

Using a JSON web token (JWT) for authorization on a json-server

I am currently working on developing a Node.js application that utilizes typicode json-server. My goal is to implement authorization within the app, where all public users have access to GET requests, but PUT, POST, and DELETE requests require a JWT token ...

javascriptnode.jsreactjsvue.jsjson-server