DEV Community: krantikr

Mastering Prompt Engineering: A Comprehensive Guide

krantikr — Wed, 13 Nov 2024 15:41:49 +0000

Introduction

Are you ready to supercharge your interactions with AI? Today, we're diving into the magic of prompt engineering, the key to making AI tools like ChatGPT do exactly what you want. Mastering the art of prompting effectively will empower you to achieve accurate and contextually relevant AI responses. In this guide, we will start from the basics, exploring what prompts are, why they matter, and how to craft them effectively.

What is Prompt Engineering?

Prompt engineering is as much an art as it is a science. It involves creating a detailed set of guidelines or instructions to communicate with language models, such as ChatGPT, to perform specific tasks. The iterative process of developing a task-specific prompt allows the generative model to produce desired outcomes. This means you may need to refine your prompts based on the results to achieve optimal performance.

The Elements of Prompt Engineering

Understanding the main elements of prompt engineering is crucial for effective communication with AI. A prompt consists of two major components: parameters and structure.

Parameters: These define how the model behaves. Examples include:
- Temperature: Controls randomness in responses. Ranges from 0 (no randomness) to 1 (high creativity).
- Top P: Similar to temperature, it determines the diversity of responses.
- Max Length: Sets the maximum length of the output, controlling verbosity.
Structure: The way the prompt is formulated, including context, instruction, input data, and output indicators.

Components of a Good Prompt

A well-crafted prompt includes several essential components to ensure effective communication with the AI:

Context: Provides background information relevant to the task.
Instruction: Clearly states the task you want the model to perform.
Input Data: The specific data you want the model to analyze or respond to.
Output Indicator: Specifies the format of the expected output (e.g., text, table, JSON).

Checklist for Designing Effective Prompts

When crafting prompts, consider the following checklist to enhance the quality of your interactions:

Define the Goal: Clearly articulate what you want to achieve.
Detail the Format: Specify how you want the output structured.
Create a Role: Assign a role to the model to guide its responses.
Clarify the Audience: Indicate the target audience for tailored responses.
Provide Context: Include all relevant information to inform the model.
Give Examples: Use examples to train the model on expected outputs.
Specify the Style: Indicate the desired tone and voice for the output.
Define the Scope: Set boundaries for the task, including any restrictions.
Apply Restrictions: Limit the output length or complexity as needed.

Common Prompting Errors

Even the best prompt engineers make mistakes. Here are some common errors to avoid:

Vague or Ambiguous Prompts: Lack of clarity can lead to poor responses.
Biased Prompts: Providing skewed examples can result in biased outputs.
Lack of Context: Insufficient background can confuse the model.
Insufficient Examples: Not providing examples can limit understanding.
Complex or Confusing Prompts: Overly complicated requests can overwhelm the model.
Not Testing Thoroughly: Failing to review outputs can lead to missed opportunities for improvement.

Writing Effective Prompts: Examples

Let's look at some examples to understand how to write effective prompts:

Basic Inquiry: Ask a straightforward question, such as "What is prompt engineering?" This yields a direct definition.
Travel Itinerary: "I want to travel for 5 days in India. Please make me an itinerary." This prompt can generate a suggested travel plan.
Text Summarization: Provide a passage and request a summary, such as "Summarize this text in one sentence." The AI will condense the information accordingly.
Code Generation: "Write a Python program using recursion to check if a string is a palindrome." This guides the AI to generate specific code.

Advanced Prompt Strategies

To refine your interactions further, consider employing advanced strategies such as:

Zero-Shot Prompting: Directly instructing the AI without examples.
Few-Shot Prompting: Providing examples to guide the AI's response.
Chain of Thought Prompting: Encouraging logical reasoning through structured prompts.

Conclusion

Mastering prompt engineering is essential for unlocking the full potential of AI tools like ChatGPT. By understanding the components of effective prompts, avoiding common errors, and exploring various applications, you can create powerful interactions with AI. Remember, practice makes perfect. Keep experimenting with different prompts, providing feedback, and refining your techniques to become a proficient prompt engineer.

How AI Can Help You Build Apps Faster and Smarter 🚀 with Codeium

krantikr — Mon, 04 Nov 2024 13:47:38 +0000

As app developers, we’re always looking for ways to speed up workflows and write better code. Codeium, a free AI-powered coding tool, is here to help developers build apps faster, smarter, and more efficiently by integrating cutting-edge AI right into Visual Studio Code. With its autocomplete, chat, and multi-language support, Codeium provides a range of features that streamline development and enhance productivity.

Let’s explore how Codeium can supercharge your app development process.

1. Boost Efficiency with Intelligent Autocomplete

Codeium’s autocomplete feature goes beyond basic coding suggestions, delivering single- and multi-line code completions across 70+ languages, including popular options like Python, JavaScript, and Java.

Example
Imagine you’re writing a function to fetch and display user data. With Codeium, you can type out the start of the function and let it complete repetitive or boilerplate code.

Prompt:

def fetch_user_data(user_id):

Codeium’s Suggestion:

 try:
        response = requests.get(f"https://api.example.com/users/{user_id}")
        response.raise_for_status()
        return response.json()
    except requests.exceptions.HTTPError as err:
        print(f"HTTP error occurred: {err}")
    except Exception as err:
        print(f"An error occurred: {err}")

This saves time and keeps you focused, letting Codeium handle the syntax and formatting details.

2. Generate Code with Natural Language Prompts

With Codeium, you can code directly from natural language descriptions. Simply write a comment describing what you need, and Codeium will generate the relevant code, letting you focus on app logic instead of syntax.

Example
Say you’re building an e-commerce app and need a function to calculate discounts. Just type a natural language comment, and let Codeium handle the rest.

Prompt:

# Function to calculate a discount price based on original price and discount rate

Codeium’s Suggestion:

def calculate_discount(price, discount_rate):
    return price - (price * discount_rate / 100)

This ability to “translate” natural language into functional code is invaluable for keeping development fast-paced and organized.

3. Use AI-Powered Chat for Code Explanations and Refactoring

One standout feature of Codeium is its integrated chat, allowing developers to ask questions about their code, request explanations, and even refactor code in real-time without leaving the VS Code environment.

Example
Suppose you’re working with a legacy codebase and come across a function that’s hard to understand. You can use Codeium’s chat to ask for an explanation, helping you quickly grasp complex logic.

Prompt:
Explain the purpose of this function.

Codeium provides a summary, saving you time spent deciphering code and allowing you to work confidently with unfamiliar codebases.

Refactoring Example
If you need to update a function to add new functionality or optimize it, simply ask Codeium’s chat assistant to refactor it for you. This feature helps keep code clean and efficient as requirements evolve.

4. Translate Code Across Languages

For multi-platform apps, Codeium’s translation feature allows you to convert code from one language to another in seconds. This is ideal for teams developing both iOS and Android versions of an app, or migrating functions between languages.

Example
If you have a function in JavaScript but need the equivalent in Python, Codeium can make the transition seamless.

JavaScript Function:

function greetUser(name) {
    return `Hello, ${name}!`;
}

Prompt:
Translate this function to Python.

Python Result:

def greet_user(name):
    return f"Hello, {name}!"

This cross-language support saves hours in manual translation and reduces errors, enabling you to develop apps across multiple platforms with ease.

5. Streamline Documentation with Automated Suggestions

Consistent documentation is crucial, especially in collaborative environments. Codeium’s documentation tools auto-generate comments and documentation as you code, keeping everything up-to-date with minimal effort.

Example
Let’s say you’re writing a utility function. Codeium can suggest relevant documentation comments based on your code structure, ensuring that documentation remains clear and comprehensive as your code evolves.

Conclusion
Codeium is more than just an autocomplete tool; it’s an all-in-one assistant that can help you code faster, stay organized, and improve the quality of your applications. From natural language code generation to real-time chat assistance and cross-language translation, Codeium is designed to make app development smarter and more efficient. And best of all, it’s free to install on Visual Studio Code, so you can start experiencing the benefits right away.

🚀 Have you tried this AI tool in your development? Share your experience and recommendations in the comments!

Unlocking the Potential of Blockchains: Exploring the Future of Decentralized Technology

krantikr — Sat, 04 Feb 2023 15:33:35 +0000

Blockchain is a decentralised digital ledger that is used to record transactions across a network of computers in a secure and transparent manner. Each block in the chain contains a unique set of validated transactions that are linked to previous blocks.

It was first introduced in a white paper in 2008 by the mysterious creator, Satoshi Nakamoto, but it gained fame when it was used as the fundamental technology for cryptocurrency, such as Bitcoin.

Why Blockchains

Blockchain brings revolutionizes the way transactions are processed, recorded and stored also it provides a secure, transparent and tamper-proof way to store and manage data. It has the potential to transform various industries including finance, healthcare, and supply chain management.

Understanding Blockchain Technology

Distributed Ledger Technology (DLT) refers to a category of technologies that allow for secure, decentralized, and transparent storage and transfer of digital data across multiple nodes. Blockchain is one specific type of DLT that uses cryptographic algorithms to ensure the immutability and consistency of the ledger. It is often used to record transactions in a secure, transparent, and tamper-proof manner in various applications, including cryptocurrencies, digital identity management, supply chain management, and voting systems.

Cryptographic hashing is a fundamental concept in blockchain technology. It is a one-way function that takes an input (or 'message') and returns a fixed-size string of characters, which is a 'hash'. The hash is unique to the input, so even a small change in the input results in a completely different hash.

In the blockchain, hashes are used to link blocks of transactions together. Each block contains a hash of the previous block, forming a chain of blocks (hence the name 'blockchain'). This creates a secure and tamper-evident record of all transactions, since altering any block in the chain would result in a change of its hash and the subsequent hashes of all following blocks, making the alteration easily detectable.

Additionally, hashes can be used for digital signatures to verify the authenticity of a transaction, which is important for maintaining the integrity of the blockchain.

Smart contracts are self-executing computer programs that run on blockchain technology. They contain a set of rules and conditions that are automatically executed and enforced when certain conditions are met. The terms of the agreement between the buyer and seller are directly written into lines of code, and the execution of the code is guaranteed by the decentralized, tamper-proof nature of the blockchain. This allows for transactions to be processed automatically and transparently, without the need for intermediaries, reducing the chances of fraud or errors. Smart contracts can be used for a wide range of applications including financial transactions, supply chain management, digital identity verification, and more.

Decentralization refers to the distribution of authority or power away from a central point to multiple individuals or nodes in a network. In the context of blockchain technology, decentralization is a key feature and refers to the absence of a central authority or intermediaries managing transactions and maintaining the network. Instead, transactions are verified by a network of nodes and recorded on a ledger (blockchain), ensuring transparency and immutability. Decentralization provides for a more secure and trustworthy system, as it eliminates the risk of a single point of failure and reduces the chances of malicious actors compromising the network.

Types of Blockchains

1. Public blockchains: A public blockchain is a decentralized, distributed ledger technology that allows for a secure, transparent, and tamper-proof record of transactions. It operates on a network of nodes, where each node has a copy of the blockchain and works together to validate and verify transactions. Public blockchains are open to anyone to participate and they do not have a central authority, allowing for equal access and creating a trustless system. Examples of public blockchains include Bitcoin and Ethereum.

2. Private blockchains: Private blockchains are decentralized networks that are designed to be used by a specific group of individuals or organizations, rather than being open to the public. They are usually built using blockchain technology and provide the same benefits as public blockchains such as immutability, transparency, and security. However, they are designed to offer more control over the network, as only authorized participants are allowed to participate in the consensus process, validate transactions and maintain the ledger. They are often used for applications such as supply chain management, financial transactions, and digital identity management.

3. Consortium blockchains: A consortium blockchain is a type of blockchain technology that is partially decentralized, meaning it is governed and controlled by a select group of organizations or individuals. It operates as a hybrid between a fully private blockchain, which is controlled by a single entity, and a fully public blockchain, such as Bitcoin or Ethereum, which is open to everyone.

The purpose of consortium blockchains is to balance the benefits of decentralization with the need for control and privacy in certain applications, such as financial transactions or supply chain management. The members of the consortium are usually trusted entities that have a stake in the network and help to validate transactions and add blocks to the chain.

Examples of consortium blockchains include R3's Corda and the Enterprise Ethereum Alliance (EEA). These networks allow multiple organizations to securely share information and collaborate on transactions, while still maintaining control over their data.

4. Hybrid Blockchain: A Hybrid Blockchain is a combination of two or more blockchains with different features, protocols and consensus mechanisms that work together to provide a more secure, scalable, and customizable blockchain solution. It allows organizations to take advantage of the benefits of both public and private blockchains, making it possible to enjoy the transparency and security of public blockchains while still maintaining the control and privacy of private blockchains. This type of blockchain can be used for various use cases, such as supply chain management, digital identity, and financial services.

Use Cases of Blockchains

1. Cryptocurrencies: One of the most well-known use cases of blockchains is as the underlying technology for cryptocurrencies like Bitcoin, Ethereum, and others.

2. Supply Chain Management: Blockchains can be used to track the movement of goods and materials throughout a supply chain, providing transparency and helping to reduce fraud and errors.

3. Digital Identity Management: Blockchains can be used to securely store and manage personal identification information, making it more difficult for unauthorized parties to access sensitive data.

4. Healthcare: Blockchains can be used in healthcare to securely store and share patient information, streamline administrative processes, and improve the accuracy of medical records.

5. Voting: Blockchains can be used to develop secure and transparent voting systems, helping to prevent fraud and ensure the accuracy of election results.

6. Financial Services: Blockchains can be used to improve the speed and efficiency of financial transactions, reduce costs, and increase transparency in the financial industry.

7. Real Estate: Blockchains can be used to securely track ownership and transfer of property, making the process of buying and selling real estate more efficient and less prone to errors and fraud.

Challenges of Blockchains

scalability is one of the major challenges of blockchain technology. The decentralized nature of blockchains, which is one of its strengths, can lead to slow processing times and high transaction fees when there is high demand. This limits the ability of blockchain networks to handle large volumes of transactions, making it a challenge for them to be widely adopted for mainstream use. Efforts are being made to address this challenge through various scaling solutions, such as sharding and off-chain transactions, but there is still much work to be done in this area.

Regulation and Standardization are also big challenges in the blockchain industry. As a relatively new technology, blockchains operate in a largely unregulated space, which can lead to legal and ethical challenges in certain jurisdictions. There is also a lack of standardization across different blockchain platforms, making it difficult for them to communicate with each other and exchange data and assets. This can hinder the growth and adoption of the technology. However, there are ongoing efforts to address these challenges, such as the creation of industry standards and the development of regulatory frameworks, which could help to mitigate these issues in the future.

Interoperability: Different blockchain platforms use different technologies, which can make it difficult for them to communicate with each other and exchange data and assets.

Adoption and integration of the blockchain are a bit slow for their potential. In the last few years, more organizations and governments recognize its potential, and the number of practical applications for blockchain has expanded rapidly.

Conclusion

In summary, blockchain technology offers a secure, transparent, and efficient way of recording and verifying transactions, making it a potentially transformative technology across a wide range of industries.

The future outlook for blockchain technology is very positive, with many experts predicting that it will have a significant impact on a variety of industries. Some of the potential impact of blockchain technology on various industries are:

Financial Services: Blockchain technology has the potential to revolutionize the way financial transactions are processed, by enabling faster and more secure cross-border payments, reducing the need for intermediaries and improving overall efficiency.
Supply Chain Management: Blockchain technology can help to increase transparency and traceability in supply chain management, reducing the risk of fraud, improving supply chain visibility, and increasing efficiency.
Healthcare: Blockchain technology has the potential to revolutionize the way patient data is stored and shared, improving data privacy and security, and reducing the risk of data breaches.
Government: Blockchain technology has the potential to improve the efficiency of government processes, such as voting systems, land registry, and tax collection, and increase transparency and accountability.
Gaming: Blockchain technology has the potential to disrupt the gaming industry by enabling new business models, creating new revenue streams, and increasing player engagement.
Real Estate: Blockchain technology can improve the efficiency and transparency of real estate transactions, by enabling secure and tamper-proof property records and reducing the risk of fraud.

React Hooks

krantikr — Sun, 23 Feb 2020 11:26:24 +0000

In this article, I am going to share with you my understanding of hooks like why we need hooks? What are hooks? And how we can use hooks?

Why we need hooks?

Using react hooks they are trying to resolve three major issues those are Huge components, Duplicated logic, and Complex pattern.

What are the hooks?

React Hooks is a new feature that is added to react.js with react 16.8. Previously if you want to use state or life cycle then you should have to write only Class components but with the help of hooks, you can do the same thing with functional components.
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes, they let you use React without classes
I think Hooks let us build components with less effort. Each Hook may contain some local state and side effects. You can pass data between multiple Hooks just like you normally do between functions.
React have some built-in hooks like useState and useEffect serve as the basic building blocks. We can use them from our components directly or you can create your own custom Hooks. A custom Hook (we’ll talk about this in a moment) is a JavaScript function whose name starts with ”use”.

useState

useState is a Hook. We call it inside a function component to create a local state to it. useState returns a pair of the current state value and a function that lets you update it. You can call this function from an event handler or somewhere else. It’s very much similar to this.setState in a class but it has one big difference with this.setState is, it doesn’t merge the old and new state together it will just replace that. But nothing to worry here because You can use the State Hook more than once in a single component.

const [state, setState] = useState(initialState);
//you can give any name for you state and setState function. initialState is the defult value thatever you want to set.

useEffect

useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes. useEffect will run after the render is committed to the screen.
By default, effects run after every completed render, but you can choose to fire them only when certain values have changed. Effects may also optionally specify how to “clean up” for that you just need to return a function after userEffect function. Just like with useState, you can use more than a single effect in a component.
userEffect takes two arguments first will be the function that will run after every completed render and the second argument is an array of dependency of that function that we can pass. Whatever value we will pass in this array that value change will decide to run that function.

Effects may also optionally return a function where we can do clean up task. This function will run just right before userEffect will run next time.

useEffect(() => {
    // it will run after every completed render so it’s very much similar with componentDidUpdate but it will run when component will mount first time also.
  });

useEffect(() => {
    // it will run only once when the component will mount so it’s just like componentDidMount  
  },[]);

useEffect(() => {
    // it will run after every completed render  
  }
return () => {
    // you can do the clean up here
});

useContext

Accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest above the calling component in the tree.
A component calling useContext will always re-render when the context value changes. If re-rendering the component is expensive, you can optimize it by using memoization.

const value = useContext(MyContext);

Custom Hook

If you want to build your own hooks for your reusable functions then you can. A custom Hook is a JavaScript function whose name starts with ”use”. it’s just like a normal function so it may take arguments and may return something. Its name should always start with use so that react will treat this as hooks and the rules of Hooks apply to it.

function useCustomHook() {
  // Wright your custom hook logic here
}

The most useful git commands that every developer should know

krantikr — Wed, 27 Nov 2019 06:56:37 +0000

In this developing and fast-growing technology world, it is very important that how you keep all your code and your changes save so to solve this problem Git came to the picture where you can keep your all code changes version wise safe. Basically, with the help of Git, you can track your code changes. In this blog, we are just going to discuss some of the terminal comments for Git that will always help you in day to day life. You can do the same things with Git Tools UI but I prefer to do these things from the command line because doing things in the command line is cool and faster.

what is Git?

Git is a free and open-source distributed version control system. Git’s purpose is to keep track of projects and files as they change over time with manipulations happening from different users. Git stores information about the project’s progress on a repository. A repository has committed to the project or a set of references to the commits called heads. All this information is stored in the same directory as the project in a sub-directory called .git and will mostly be hidden by default in most systems.

git config
git init
git status
git fetch
git branch
git checkout
git add
git commit
git push
git pull
git diff
git stash
git merge
git reset
git cherry-pick

#git config

The git config command sets the author's name and email address. Whatever you will set here that will appear with your commits.

git config --global user.name "[name]" // To set author's name
git config --global user.email "[email]" // To set email address

#git init

The git init command creates a new Git repository. You can use this to convert your existing project to a Git repository or initialize a new repository.

git init repository_name

#git status

The git status command displays the state of the working directory. You can check your branch, all your files whichever has changed or added and also you can check how many commits you have to push whatever you have committed but not pushed.

git status

#git fetch

The git fetch command basically refers from a remote repository into your local repository.

git fetch remote_name branch_name // will only fetch the changes from that remote branch
git fetch remote_name // will only fetch the changes from remote origin
git fetch --all // will fetch all branches from all remotes

#git branch

The git branch command basically shows you a list of branches.

git branch // list of all your local branch
git branch -r // list of all remote branches
git branch -a // list of all local and remote branches

#git checkout

The git checkout command always allows you to switch into a different branch, create a new branch or reset your file changes.

git checkout branch_name // checkout into a different branch
git checkout -b new_branch_name // create a new branch and switch into that
git checkout file_path // reset all your change from that file
git checkout . // reset all your file change

#git add

The git adds command is basically used to add your local changes.

git add . // add your all local changes
git add directory_path // add all changes from a particular directory
git add file_path // add your changes from a particular file

#git commit

The git commit command is basically used to commit our code and log message about it.

git commit -m "comment"

#git push

The git push command is basically used to push our changes to the remote.

git push

#git pull

The git pull command is basically used to pull out all the remote changes to our local.

git pull

#git diff

The git diff command is basically used to see your local changes line by line.

git diff

#git stash

The git stash command is used to stash all our local changes from the current working directory and adds to the stash list.

git stash // Stash the changes.
git stash list // list the stash entries that you currently have.
git stash pop // remove a single stashed state from the stash list and apply it on top of the current working directory
git stash apply // like pop, but do not remove the state from the stash list.
git stash clear // remove all the stash entries.

#git merge

The git merge command is used to join branch changes into one. For merge first checkout with your branch where you want to take all the other branch changes then apply merge command.

git merge --abort // can only be run after the merge results in conflicts. it will abort the merge process and try to reconstruct the pre-merge state. 
git merge --no-ff branch_name // create a merge commit in all cases, even when the merge could instead be resolved as a fast-forward.

#git reset

The git reset command is used to return the entire working directory to the last committed state.

git reset --hard // will remove the last commit from the current branch, and your working directory
git reset --soft // will remove the last commit from the current branch, but the file changes will stay in your working directory.

#git cherry-pick

The git cherry-pick command is used to take out some commits from one branch and add it to another branch.

git cherry-pick commit_id 
git cherry-pick commit_id -x // cherry-pick with all the commits message

I have written this blog to just remember all the commend that we are using in our day to day life, if I have missed anything then feel free to add that in the comment. I will appreciate all your comments and suggestions.

Browser-specific CSS for Internet Explorer, Firefox, Chrome, Safari and Edge

krantikr — Sat, 02 Nov 2019 14:38:39 +0000

If you are working with HTML and CSS then definitely you would have faced lots of browser-specific issues in CSS. I have also faced similar kind of issues at times and sometimes it's really tough to fix these issues. We can fix some of these issues by writing browser-specific CSS.
I would personally recommend avoiding the use of browser-specific CSS because it depends on the browser and their versions, it might fail with the other versions of the same browser.

Internet Explorer
Microsoft Edge
Chrome
Safari
Firefox
Opera

#Internet Explorer

/* Using conditional comments with stylesheet */
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->

/* Using conditional comments with head section CSS */
<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

/* Using conditional comments with HTML elements */
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

Using media query
/*  IE10+ */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

/*  IE6,7,9,10  */
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

/*  IE6,7  */
 @media screen\9 {
  selector { property:value; }
 }

 /* IE8  */
 @media \0screen {
  selector { property:value; }
 }

/*  IE6,7,8  */
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 /* IE9,10  */
 @media screen and (min-width:0\0){
  selector { property:value; }
 }

#Microsoft Edge

@supports (-ms-ime-align:auto) {
    selector {
        property: value;
    }
}

#Chrome


/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    selector{ property:value; } 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  selector { -chrome-:only (; 
     property:value;
  );} 
}

/* Chrome, Safari, and also the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
  selector { property:value; } 
}

#Safari


/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    selector { 
        property:value; 
    }
}}

/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm){ 
@supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
    selector { 
        property:value; 
    }
}}

/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
@media {
    selector { 
        property:value;
    }
}}

#Firefox

@-moz-document url-prefix() {
  selector {
    property:value;
  }
}

Or

/* By useing @supports */
 @supports (-moz-appearance:none) {
    selector { property:value; } 
}

#Opera

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
       selector {css rule}
 }