إعادة إنشاء تأثير النص المقطوع لـ MDN

ليس سرا أن MDN توالت تصميم جديد مرة أخرى في مارس. إنه رائع! وهناك بعض جواهر CSS-y الجميلة التي من الممتع النظر إليها. أحد هذه الأحجار الكريمة هو كيفية تعامل مكونات البطاقة مع النص المقطوع.

رائع جدا ، نعم؟ أريد أن أمزق ذلك قليلاً ، لكن هناك أمران يجذمانني حقًا إلى هذا النهج:

• إنه مثال على قطع المحتوى عمداً. لقد أشرنا إلى ذلك على أنه فقدان بيانات CSS في أماكن أخرى. وعلى الرغم من أن فقدان البيانات يعد أمرًا سيئًا بشكل عام ، إلا أنني أحب كيفية استخدامه هنا نظرًا لأن المقتطفات من المفترض أن تكون دعابة للمحتوى الكامل.
• هذا يختلف عن اقتطاع النص باستخدام text-overflow: ellipsis، وهو موضوع تم طرحه مؤخرًا عند إريك إيجيرت شاركت مخاوفه معها. الحجة الرئيسية ضدها هي أنه لا توجد طريقة لاستعادة النص الذي تم قطعه في الاقتطاع - ستعلن التكنولوجيا المساعدة عن ذلك ، لكن المستخدمين المبصرين ليس لديهم طريقة لاستعادته. يوفر نهج MDNs مزيدًا من التحكم في هذا القسم نظرًا لأن الاقتطاع مرئي فقط.

إذن ، كيف قامت MDN بذلك؟ لا يوجد شيء رائع هنا فيما يتعلق بتنسيق HTML ، مجرد حاوية بها فقرة.

<div class="card">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consectetur temporibus quae aliquam nobis nam accusantium, minima quam iste magnam autem neque laborum nulla esse cupiditate modi impedit sapiente vero?</p>
</div>

يمكننا إسقاط بعض الأنماط الأساسية لدعم الأمور.

مرة أخرى ، لا يوجد شيء خيالي للغاية. هدفنا هو قطع المحتوى بعد السطر الثالث ، على سبيل المثال. يمكننا تعيين أ max-height في الفقرة وإخفاء التجاوز لذلك:

.card p {
  max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
  overflow: hidden; /* Cut off the content */
}

توقف ، قف ، ما الأمر في ذلك calc() أمور؟ لاحظ أنني قمت بإعداد ملف --base متغير مقدمًا يمكن استخدامه كمضاعف مشترك. أنا أستخدمه لحساب font-size, line-height, padding للبطاقة ، والآن max-height من الفقرة. أجد أنه من الأسهل العمل بقيم ثابتة خاصةً عندما يعتمد الحجم الذي أحتاجه حقًا على مقياس مثل هذا. لقد لاحظت أن MDN تستخدم نفس --base-line-height متغير ، ربما لنفس الغرض.

جعل هذا السطر الثالث من النص يتلاشى؟ إنه كلاسيكي linear-gradient() على الخط :after العنصر الزائف ، والذي يتم تثبيته في الزاوية اليمنى السفلية من البطاقة. لذلك ، يمكننا إعداد ذلك:

.card p:after {
  content: ""; /* Needed to render the pseudo */
  background-image: linear-gradient(to right, transparent, var(--background) 80%);
  position: absolute;
  inset-inline-end: 0; /* Logical property equivalent to `right: 0` */
}

لاحظ أنني اتصل بـ a --background المتغير الذي تم تعيينه على نفس قيمة لون الخلفية المستخدمة في .card بحد ذاتها. بهذه الطريقة ، يبدو أن النص يتلاشى في الخلفية. ووجدت أنني بحاجة إلى تعديل التوقف اللوني الثاني في التدرج اللوني لأن النص لا يكون مخفيًا تمامًا عندما يمتزج التدرج حتى 100٪. وجدت 80% لتكون بقعة جميلة لعيني.

ونعم، :after يحتاج الى height و width. height أين ذلك --base تعود المتغيرات إلى اللعب لأننا نريد تغيير حجمها إلى الفقرة line-height لتغطية النص بارتفاع :after.

.card p:after {
  /* same as before */
  height: calc(1rem * var(--base) + 1px);
  width: 100%; /* relative to the .card container */
}

يبدو أن إضافة بكسل واحدًا إضافيًا من الارتفاع يؤدي إلى الحيلة ، لكن MDN كان قادرًا على إزالته بدونه عندما ألقيت نظرة خاطفة على DevTools. ثم مرة أخرى ، أنا لا أستخدم top (أو inset-block-start) لتعويض التدرج في هذا الاتجاه أيضًا. 🤷‍♂️

والآن بعد أن p:after تم وضعه تمامًا ، فنحن بحاجة إلى الإعلان صراحةً عن موضع نسبي في الفقرة للاحتفاظ به :after في تدفقها. خلاف ذلك، :after سيتم انتزاعه تمامًا من تدفق المستند وينتهي به الأمر خارج البطاقة. يصبح هذا هو CSS الكامل لملف .card فقرة:

.card p {
  max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
  overflow: hidden; /* Cut off the content */
  position: relative; /* needed for :after */
}

انتهينا ، أليس كذلك؟ لا! لا يبدو أن التدرج اللوني في الموضع الصحيح.

سأعترف بأنني استغرقت دماغًا في هذا الأمر وأطلقت DevTools على شبكة مطوري موزيلا لمعرفة ما الذي كنت في عداد المفقودين. أوه نعم، :after يجب أن يتم عرضه كعنصر كتلة. إنه واضح كالنوم عند إضافة حد أحمر إليه

.card p:after {
  content: "";
  background: linear-gradient(to right, transparent, var(--background) 80%);
  display: block;
  height: calc(1rem * var(--base) + 1px);
  inset-block-end: 0;
  position: absolute;
  width: 100%;
}

كلنا معا الآن!

ونعم ، يبدو يبدو أن VoiceOver يحترم النص الكامل. لم أختبر أي قارئات شاشة أخرى رغم ذلك.

لقد لاحظت أيضًا أن تنفيذ MDN يزيل pointer-events تبدأ من p:after. ربما يكون تكتيكًا دفاعيًا جيدًا لمنع السلوكيات الغريبة عند اختيار النص. لقد أضفته واختيار النص يبدو أكثر سلاسة ، على الأقل في Safari و Firefox و Chrome.