=======================================
jQuery CSS Prefix Handling
=======================================

Automatic Prefixing (since jQuery 1.8)

jQuery will automatically add vendor prefixes for you when
setting CSS properties using the .css() method.

This means you don’t need to specify prefixes like
-webkit-, -moz-, or -ms- explicitly.

.class {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: -webkit-linear-gradient(top, #000 0%, #fff 100%);
  background: -moz-linear-gradient(top, #000 0%, #fff 100%);
  background: linear-gradient(top, #000 0%, #fff 100%);
  -webkit-animation-name: slidein;
  -o-animation-name: slidein;
  -ms-animation-name: slidein;
  -moz-animation-name: slidein;
  animation-name: slidein;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

=======================================
CSS properties with jQuery
---------------------------------------

// set multiple properties
$('.class').css({
           'display' : 'flex',
        'background' : 'linear-gradient(top, #000 0%, #fff 100%)',
    'animation-name' : 'slidein',
        'transition' : 'all 1s linear',
         'transform' : 'rotate(180deg)',
  'background-color' : 'lightblue',
         'font-size' : '18px',
           'padding' : '10px'
});

// set a single property
$('div').css('transform', 'rotate(180deg)');

// retrieve a property
$('#id').css('margin-left');

// remove a property
$('#id').css('margin-left', '');


=======================================
Automate
---------------------------------------

If you already have your css styles defined the traditional
way, you might consider writing a loop to retrieve all the
styles and properties and then set them again with jQuery.

$(style).css({k[i] : v[i]});


=======================================
Add CSS Pseudo Classes with jQuery
---------------------------------------

jQuery’s .css() method does not allow direct manipulation
of pseudo-classes like :hover, :active, :focus, etc.
Pseudo-classes are a part of CSS syntax and are not part of
the DOM, making them inaccessible to JavaScript and jQuery.

However, you can achieve similar effects by adding a class
to an element and then styling it in your CSS.

=======================================
::hover
---------------------------------------

Suppose you want to add a hover effect to an element.

$('body').on('hover, '.class', function() {
  $(this).css({'property': 'value', ...});
}, function() {
  // optional: reset styles when mouse leaves
  $(this).css({'property': 'initial value', ...});
});


=======================================
::before & ::after
---------------------------------------

If you want to dynamically change the content of a
pseudo-element (e.g., ::before or ::after) using jQuery,
you’ll need to use a workaround. One approach is to add
a data attribute to the element and then use CSS to style
the pseudo-element based on that attribute.

1. Add a data attribute to the element using jQuery’s
   .attr() method:

    $('body').on('hover', '.element', function() {
      $(this).attr('data-pseudo-content', 'dothis');
    });

2. In your CSS, define the styles for the pseudo-element
   based on the data attribute:

    .element[data-pseudo-content="dothis"]::after {
      content: attr(data-pseudo-content);
    }

In this example, when the element is hovered, the
data-pseudo-content attribute is updated to "dothis",
and the CSS styles the pseudo-element accordingly.

Remember that these workarounds are not direct
manipulations of pseudo-classes using .css() but rather
creative solutions to achieve similar effects.


=======================================
:0)
=======================================