CSS استفادہ کنندہ کا ایجنڈا

CSS استفادہ کنندہ کا ایجنڈا

ਇਸ ਚਾਪ 'ਚ ਤੁਸੀਂ ਹੇਠ ਲਿਖੇ CSS ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਨੂੰ ਸਿੱਖੋਗੇ:

  • resize
  • outline-offset

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਸਬੰਧਤ ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਦਾ ਪਹਿਲਾ ਬਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਸਬੰਧਤ ਸੰਖਿਆ ਵਿੱਚ ਦਿੱਤਾ ਗਿਆ ਹੈ。

حصہ ਚਰਮ ਆਈਈ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
resize 4.0 ਸਮਰਥਿਤ ਨਹੀਂ 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS ਕੰਮਕਾਜ

resize ਪ੍ਰਤੀਯੋਗਿਤਾ ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਮਾਲਕ ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਅਤੇ ਕਿਵੇਂ ਕਰਨਾ ਹੈ ਦੇ ਨਿਰਧਾਰਣ ਕਰਦੀ ਹੈ。

ਇਹ div ਏਲੀਮੈਂਟ ਮਾਲਕ ਦੁਆਰਾ ਕੰਮਕਾਜ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ!

ਕੰਮਕਾਜ: ਇਸ div ਏਲੀਮੈਂਟ ਦੇ ਹੱਥੀਂ ਕਲਿੱਕ ਕਰੋ ਅਤੇ ਖਿੱਚੋ。

ਧਿਆਨ:ਇੰਟਰਨੈੱਟ ਈਕਸਪਲੋਰਰ ਨੇ resize ਪ੍ਰਤੀਯੋਗਿਤਾ ਨਹੀਂ ਸਮਰਥਿਤ ਕੀਤੀ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ <div> ਏਲੀਮੈਂਟ ਦੀ ਚੌਡਾਈ ਸਿਰਫ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ:

ਉਦਾਹਰਣ

div {
  resize: horizontal;
  overflow: auto;
}

آپ خود سجاوٹ دیکھیئے

ਹੇਠ ਦਾ ਉਦਾਹਰਣ <div> ਏਲੀਮੈਂਟ ਦੀ ਉਚਾਈ ਸਿਰਫ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ:

ਉਦਾਹਰਣ

div {
  resize: vertical;
  overflow: auto;
}

آپ خود سجاوٹ دیکھیئے

ਹੇਠ ਦਾ ਉਦਾਹਰਣ <div> ਏਲੀਮੈਂਟ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌਡਾਈ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ:

ਉਦਾਹਰਣ

div {
  resize: both;
  overflow: auto;
}

آپ خود سجاوٹ دیکھیئے

ਕਈ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ <textarea> ਮੂਲਤਬੀ ਤੌਰ 'ਤੇ ਮਿਸਾਲ ਦਾ ਮੁੱਲ ਹੈ। ਇੱਥੇ ਅਸੀਂ resize ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੀ ਇਸ ਮਿਸਾਲ ਨੂੰ ਨਾਬਾਲਾ ਕਰਦੇ ਹਾਂ:

ਉਦਾਹਰਣ

textarea {
  resize: none;
}

آپ خود سجاوٹ دیکھیئے

سی ایس ایس کاوتر کا کج

outline-offset ਪ੍ਰਤੀਯੋਗਿਤਾ ਕਿਨਾਰਾ ਅਤੇ ਏਲੀਮੈਂਟ ਦੇ ਕਿਨਾਰੇ ਬਾਹਰ ਜਗ੍ਹਾ ਜੋੜਦੀ ਹੈ。

ਇਹ div 15px ਦੀ ਕਿਨਾਰਾ ਦੇ ਬਾਹਰ ਹੈ。

ਧਿਆਨ:ਕਿਨਾਰਾ ਅਤੇ ਕਿਨਾਰਾ ਵੱਖਰੇ ਹਨ! ਕਿਨਾਰੇ ਤੋਂ ਵੱਖ, ਕਿਨਾਰਾ ਰੇਖਾ ਏਲੀਮੈਂਟ ਦੇ ਕਿਨਾਰੇ ਬਾਹਰ ਚਿੱਤਰਿਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਅਤੇ ਹੋਰ ਸਮੱਗਰੀ ਨਾਲ ਓਵਰਲੈਪ ਕਰ ਸਕਦੀ ਹੈ। ਨਾਲ ਹੀ, ਕਿਨਾਰਾ ਏਲੀਮੈਂਟ ਦੀ ਕੰਮਕਾਜ ਦਾ ਹਿੱਸਾ ਨਹੀਂ ਹੈ: ਏਲੀਮੈਂਟ ਦੀ ਕੁੱਲ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਕਿਨਾਰਾ ਰੇਖਾ ਚੌਡਾਈ ਦੇ ਪ੍ਰਭਾਵ ਤੋਂ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਹੁੰਦੀ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ outline-offset ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿੱਚ ਬਾਰੀਕੀ ਅਤੇ ਕਿਨਾਰੇ ਦਰਮਿਆਨ ਜਗ੍ਹਾ ਜੋੜਦਾ ਹੈ:

ਉਦਾਹਰਣ

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

آپ خود سجاوٹ دیکھیئے

CSS استفادہ کنندہ کا ایجنڈا حصص

درج ذیل جدول میں تمام استفادہ کنندہ کا ایجنڈا حصص درج ہیں:

حصہ وصف
outline-offset کسی محیط یا علامت کی باریکائی کی جانب کا فاصلہ اضافہ کرتا ہے。
resize عنصر کو استفادہ کنندہ کی طرح سے بڑھا یا چھوٹا کیا جاسکتا ہے یا نہیں، مقرر کرتا ہے。